reactjs 如何使用React钩子在完成一个fetch请求后更新状态？

inkz8wg9 于 2023-03-29 发布在 React

关注(0)|答案(2)|浏览(124)

我尝试使用fetch请求从我的后端API中检索文章数据并将其显示在屏幕上。请求成功检索数据，但是当我尝试使用setArticle钩子更新组件变量的状态时，什么也没有发生，请求完成时没有传入任何数据。

function Home(props) {

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

    useEffect(() => {       
        fetch(`http://localhost:8000/api/articles/`, {
            method: 'GET',
        })
        .then(response => response.json())
        .then(result => {
            if (result.error) {
                console.log('Error:', result.error);
                return false;
            }
            console.log(result);
            setArticles(result);
            console.log(articles);
        })
    }, [])

    const articleList = articles.map((article) =>
        <ArticleCard article={article} width='400'/>
    )

    return(
        <ul className="article-list">
            {articleList}
        </ul>
    )
}

export default Home;

我已经在www.example.com上阅读了React文档https://react.dev/reference/react/useState#ive-updated-the-state-but-logging-gives-me-the-old-value，钩子仍然令人难以置信地困惑。我明白状态不会更新，但这个例子发生在fetch请求之外，所以新变量被存储。我应该如何让articles变量更新或返回新变量，以便我可以将json数据Map到articleList？

reactjs

来源：https://stackoverflow.com/questions/75861108/how-to-use-react-hook-to-update-state-after-completing-a-fetch-request

2条答案

按热度按时间

eoigrqb61#

import "./styles.css";
import { useState, useEffect } from "react";
function Home() {
  const [articles, setArticles] = useState([]);

  const FetchArticle = async () => {
    await fetch(`https://jsonplaceholder.typicode.com/posts`)
      .then((response) => response.json())
      .then((result) => {
        if (result.error) {
          console.log("Error:", result.error);
          return false;
        }
        console.log(result);
        setArticles(result);
        // console.log(articles);
      });
  };

  useEffect(() => {
    FetchArticle();
  }, []);

  return (
    // return page HTML and articleList
    <>
      {articles.map((article) => (
        <h1>{article.title}</h1>
      ))}
    </>
  );
}

export default Home;

试试这个，你的代码运行良好。我使用了虚拟数据，数据可以很容易地呈现在屏幕上。

赞(0）回复(0）举报 2023-03-29

biswetbf2#

如果你在这里使用redux和redux-thunk会更好。
redux是一个智能存储，redux-thunk是一个中间件，用于发出类似于fetch的请求。

赞(0）回复(0）举报 2023-03-29