无法在 useEffect 钩子内设置状态

时间:2021-02-22 16:11:34

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

我可以看到包含用户数组的响应对象,但似乎 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();
     },[])

1 个答案:

答案 0 :(得分:1)

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

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

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

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