javascript - React useEffect 无限循环

Question

我的 useEffect 正在从 Web api 获取数据。我想在主页上呈现所有帖子，并在有人创建新帖子时再次触发我的 useEffect 。问题是，当我依赖 useEffect 时，它开始发出无休止的请求。当我将空数组作为 dependency 传递时，当有人创建新帖子时，它不会在主页上呈现，直到我刷新页面。我在互联网上读到了很多关于这个问题的内容，但我仍然不知道该怎么做。谢谢

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const jwt = localStorage.getItem("jwt");

    fetch('https://localhost:44366/api/Posts/getAllPosts',
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          'Authorization': 'Bearer ' + jwt
        },
      })
      .then(r => r.json()).then(result => setPosts(result));
  }, [posts]);


  return (
    <div >
      <Router>
        <Header />
        <main className="App">
          {
            posts.map(post => (
              <Post keyToAppend={post.CreatedOn} username={post.User.FirstName} title={post.Title} content={post.Content} images={post.ImageUrls} avatarImage={post.User.MainImageUrl} />
            ))
          }
        </main>
      </Router>
      <Footer />
    </div>
  );
}

发布组件:

const Post = ({ keyToAppend, username, title, content, images, avatarImage }) => {
    return (
        <div className="post" key={keyToAppend}>
            <div className="post__header">
                <Avatar
                    className="post__avatar"
                    alt="avatar"
                    src={avatarImage}
                />
                <h3 className="username">{username}</h3>

            </div>
            <h1 className="title">{title}</h1>
            <p className="content">{content}</p>
            <p>
                {typeof images != "undefined" ? <ImageSlider slides={images} /> : ""}
            </p>
        </div>
    )
}


export default Post;

Answer 1

从依赖项数组中删除 posts，因此它只是 []。当组件加载时，这将运行一次效果。

useEffect(() => {
  const jwt = localStorage.getItem("jwt");

  fetch('https://localhost:44366/api/Posts/getAllPosts',
    {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        'Authorization': 'Bearer ' + jwt
      },
    })
    .then(r => r.json()).then(result => setPosts(result));
}, []);
// ^^−−−−− remove `posts` here

它在当前代码中无限运行的原因是您的效果回调更改了 posts 状态成员，这会再次触发效果(因为 posts 位于依赖项数组中)。您只需将您在效果回调中读取的依赖项数组中包含的内容即可。您从未在效果回调中阅读过 posts。

---

旁注:该代码正在成为我描述的 fetch API footgun 的牺牲品 here 。您需要在调用 r.json 之前检查 r.ok (并处理错误):

useEffect(() => {
    const jwt = localStorage.getItem("jwt");

    fetch("https://localhost:44366/api/Posts/getAllPosts", {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + jwt
        },
    })
    .then(r => {
        if (!r.ok) { // <=================
            throw new Error(`HTTP error ${r.status}`);
        }
        return r.json();
    })
    .then(result => setPosts(result))
    .catch(error => {
        // ...handle/report error here...
    });
}, []);