Question

我试图将数据从服务器渲染到我的React前端。 axios调用工作并返回数据库中的测试数据，但是我似乎无法使用此数据设置状态，然后将其呈现到页面上。我花了几个小时来实施不同的方法并阅读了每个相关的问题，但是似乎没有任何效果。我想念什么？唯一会呈现的是“无结果可显示”和console.logging文章会产生一个空数组（设置其状态之后）。

我已经尝试过setArticles（{articles：data}），setArticles（data）...没有用。

console.log（data）返回 0：{_ id：“ 5de17f5639103b3f430571c4”，标题：“ testing”，链接：“ www.test.com”，标题：“ test headline”，摘要：“ test summary”} 长度：1 proto ：数组（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;

Answer 1

您首先将状态设置为空数组：

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

但是稍后您将其设置为对象：

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

然后对其进行测试，就好像它是返回的数组一样：

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

我认为您可以将useEffect中的数据简单地设置为：

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

使用React和Hooks设置从API调用到服务器的状态

1 个答案: