Javascript 当使用React中的useState在promise中设置状态时，应用程序将继续重新呈现

我想调用rest端点，检索项目数组并在页面中显示它们

const[users，setUsers]=useState[]； axios .gethttps://reqres.in/api/users .thenresponse=>{ console.logresponse； setUsersresponse.data.data； } .catch函数错误{ //处理错误 console.logerror； };

---

但是，该应用程序不断地重新渲染。我试图将ajax调用放在useEffect回调中，但它没有。。。effect您需要将api调用移动到Useffect钩子中：

---

您需要将api调用移动到useEffect钩子中：

---

原因很清楚。每次渲染组件时都会调用Axios.get。为了防止这种情况，我们可以在useState调用中调用Axios.get。 这是我的解决办法

功能应用程序{ const[renderCounter，setRenderCounter]=useState0； const[users，setUsers]=useState=>{ axios .gethttps://reqres.in/api/users .thenresponse=>{ console.logresponse； setRenderCounterrenderCounter+1； setUsersresponse.data.data； } .catch函数错误{ //处理错误 console.logerror； }; 返回[]； }; 回来 呈现：{renderCounter} 名称 姓 电子邮件 {users.length&& users.mapuser=> {user.first_name} {user.last_name} {user.email} } {users.length==0&&Loading…} ;

---

} 原因很清楚。每次渲染组件时都会调用Axios.get。为了防止这种情况，我们可以在useState调用中调用Axios.get。 这是我的解决办法

功能应用程序{ const[renderCounter，setRenderCounter]=useState0； const[users，setUsers]=useState=>{ axios .gethttps://reqres.in/api/users .thenresponse=>{ console.logresponse； setRenderCounterrenderCounter+1； setUsersresponse.data.data； } .catch函数错误{ //处理错误 console.logerror； }; 返回[]； }; 回来 呈现：{renderCounter} 名称 姓 电子邮件 {users.length&& users.mapuser=> {user.first_name} {user.last_name} {user.email} } {users.length==0&&Loading…} ;

---

}为什么有一个空数组作为useEffect的第二个参数？这意味着当组件呈现时，useEffect内部的回调只会被调用一次。为什么有一个空数组作为useEffect的第二个参数？这意味着当组件呈现时，useEffect内部的回调只会被调用一次。

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>
  );

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);
    });
}, [])