【问题标题】:cannot set state inside useEffect hook无法在 useEffect 挂钩内设置状态
【发布时间】:2021-05-24 21:44:19
【问题描述】:

我可以看到包含用户数组的响应对象,但似乎 setState 在 useEffect() 钩子中不起作用。

这是请求代码。

     const [users,setUsers] = useState([]);
     const getUsers=async()=>{
         await axios.get(API_URL,{
             headers:{
                 'Content-Type': 'application/json',
                     'Accept': 'application/json',
                     'Access-Control-Allow-Origin': '*'
             }
         })
         .then((res)=>{
            const data = res.data.users;
             console.log(data);
            setUsers([...users,data]);
            console.log(users);
            
         })
         .catch((err)=>{
             console.log(err);
         })
     }
     useEffect(()=>{
         
         getUsers();
     },[])

【问题讨论】:

标签: reactjs axios react-hooks use-effect use-state


【解决方案1】:

setUsers()是异步方法,不能在setusers()之后立即获取users的更新值。

setUsers([...users,data]);
console.log(users); // This will console old value of users

您应该使用useEffect 并添加users 依赖项来检查users 的更新值。

useEffect(() => {
  console.log(users);
}, [users]);

【讨论】:

  • 感谢@WilliamWang 的回复。
  • 当 'users' 在 useEffect() 的依赖数组中传递时,我得到的用户数量比我实际拥有的要多
  • useEffect(() => { getUsers(); }, [users])
  • 不,只需在 console.log 中再添加一个 useEffect 即可。你应该在 useEffect 中做 getUsers() 没有依赖。
  • 现在我可以获取 users 数组但无法访问其属性,例如,users.forEach((user)=>console.log(user)) 生成用户数组,但 users.forEach((user)=>console.log(user.firstname)) 打印未定义。
猜你喜欢
  • 2021-02-11
  • 1970-01-01
  • 2022-01-21
  • 2019-09-23
  • 2021-03-16
  • 1970-01-01
  • 2020-05-23
  • 1970-01-01
  • 2020-04-05
相关资源
最近更新 更多