javascript - 在React中使用useState在promise中设置状态时，应用程序会保持重新渲染

我想打电话给其他端点，检索项目数组并将其显示在页面中。

const [users, setUsers] = useState([]);

axios
    .get("https://reqres.in/api/users")
    .then(response => {
      console.log(response);
      setUsers(response.data.data);
    })
    .catch(function(error) {
      // handle error
      console.log(error);
    });

return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Last Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {users.length &&
            users.map(user => (
              <tr key={user.id}>
                <td>{user.first_name}</td>
                <td>{user.last_name}</td>
                <td>{user.email}</td>
              </tr>
            ))}
          {users.length === 0 && "Loading..."}
        </tbody>
      </table>
    </div>
  );

但是，该应用程序会不断重新渲染。我试图将ajax调用放在useEffect回调中，但是没有任何效果。

这是带有代码的沙箱的链接：Codesandbox

最佳答案

您需要将您的api调用移至useEffect挂钩内：

useEffect(() => {
  axios
    .get("https://reqres.in/api/users")
    .then(response => {
      console.log(response);
      setUsers(response.data.data);
    })
    .catch(function(error) {
      // handle error
      console.log(error);
    });
}, [])

Updated sandbox