Setting State from API Call to Server using React and Hooks

Question

I'm trying to render data from my server to my React front end. The axios calls work and return test data that is in my database, but I can't seem to set the state with this data and then render it onto the page. I've spent hours implementing different approaches and reading every related problem, but nothing seems to work. What am I missing? The only thing that will render is the "no results to display" and console.logging articles yield an empty array (after setting its state).

I've tried setArticles({articles: data}), setArticles(data)...nothing works.

The console.log(data) returns 0: {_id: "5de17f5639103b3f430571c4", title: "testing", link: "www.test.com", headline: "test headline", summary: "test summary"} length: 1 proto: Array(0)

function Home(){
    const [articles, setArticles] = useState([]);
    useEffect(() => {
        let initialArticles = [];
        axios.get("/api/articles")
        .then(response => {
            let data = response.data; 
            initialArticles = data.map(article => {
                return article
            });
            return initialArticles
        }).then(data => { 
            console.log(data) 
            setArticles({
                headline: data.headline, URL: data.URL, summary: data.summary, comment: data.comment
            })
            console.log(articles)
        })
    }, [])
    return (
        <div id="homeBackground">
        <Container id="homeContainer">
            <h1>News Scraper</h1>
            <h4>Automatically grab the latest headlines.</h4>           
            {articles.length ? (
              <ul>
                {articles.map(el => (
                  <li key={el._id}>
                    <a href={el.URL}>
                      <strong>
                        {el.headline}
                      </strong>
                    </a>
                  </li>
                ))}
              </ul>
            ) : (
              <h3>No Results to Display</h3>
            )}
        </Container>
        </div>
    )
};

export default Home;

looks like you're trying to set an object where the articles state expects an array.. try setArticles(data) instead — albert
– albert, Commented Dec 2, 2019 at 23:05

Samuel Goldenbaum · Accepted Answer · 2019-12-02 23:13:04Z

1

You are first setting your state as an empty array:

const [articles, setArticles] = useState([]);

But later you are setting it as an object:

setArticles({
                    headline: data.headline, URL: data.URL, summary: data.summary, comment: data.comment
                })

and then testing it as if it were an array in your return:

{articles.length ? (
              <ul>
                {articles.map(el => (

I think you can simply set the data in your useEffect as:

    useEffect(() => {
        axios.get("/api/articles")
        .then(response => {
            setArticles(response.data); 
        });
    }, [])

answered Dec 2, 2019 at 23:13

Samuel Goldenbaum

19k20 gold badges74 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick Roberts Over a year ago

useEffect(() => { let canceled = false; axios.get('/api/articles').then(response => {             if (!canceled) setArticles(response.data);          }); return () => { canceled = true; }; }, []);

will prevent "memory leak" warnings in case the component unloads before the API call completes.

Collectives™ on Stack Overflow

Setting State from API Call to Server using React and Hooks

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related