State 未从 useEffect 挂钩更新

Question

出于某种原因，当我从 useEffect 挂钩更新我的 state 时，它没有持续存在。 我希望我的用户列表会不断增长，但我只看到一个用户。 为什么用户没有增长？

import { useState, useEffect } from "react";

interface IUser {
  name: {
    first: string;
    last: string;
  };
  picture: {
    thumbnail: string;
  };
}

function App() {
  const [users, setUsers] = useState<IUser[]>([]);

  const getUserName = (user: IUser): string => {
    if (!user) return "";

    return `${user.name.first} ${user.name.last}`;
  };

  const getThumbnail = (user: IUser): string => {
    if (!user) return "";

    return user.picture.thumbnail;
  };

  useEffect(() => {
    setInterval(() => {
      fetch("https://randomuser.me/api")
        .then((res) => res.json())
        .then((json) => {
          let newusers = [...users, json.results[0]];
          setUsers(newusers);
        })
        .catch((err) => {
          console.log(err);
        });
    }, 3000);
  }, []);

  return (
    <div className="App">
      {users?.map((user, idx) => (
        <div key={idx}>
          <h2>{getUserName(user)}</h2>
          <img src={getThumbnail(user)} />
        </div>
      ))}
    </div>
  );
}

export default App;

这是一个演示问题的codesandbox https://codesandbox.io/s/react-typescript-forked-5h3553?file=/src/App.tsx:0-1054

Answer 1

问题来自setInterval的使用。 当它被定义时，它会创建一个闭包，其中包含变量users的当前值，当然它以[]开头。 所以每次调用间隔时，它都使用它在实例化时的值。

幸运的是，对 setState 的调用传递了前面 state 的一个参数，您可以使用它来快速解决您的问题：

.then((json) => {
  setUsers((prev) => [...prev, json.results[0]]);
})

Answer 2

您需要使用从 useState 钩子返回的方法来更新数组。

这是解决方案：

let newuser = json.results[0];
setUsers(prev => [...prev, newuser]);

代替：

let newusers = [...users, json.results[0]];
setUsers(newusers);

Answer 3

只需像这样直接更新setUsers ：

setUsers(prevState => […prevState, json.results[0]]);