无法在ReactJS中设置useState钩子的值

Question

我使用 axios 访问“http://localhost:8000/api/lists/”，访问它后，如果我使用 console.log() ，那么这些值将在控制台中打印，但在设置它显示的状态时一个空数组..如何将 res.data 的值设置为 setArrData()。谁能帮忙解决一下吗？...

const [arrData, setArrData] = React.useState([])
useEffect(()=>
        getData()
},[])

const getData=()=>{
    let inp=field.inp

    axios.post('http://localhost:8000/api/lists/',{
            'input':inp
        },
        {
            headers:{'Content-Type': 'application/json'},
        }
    ).then(res=>{
        if(res.status===200){
            setArrData(res.data)
        }
    }).catch(err=>console.log(err))
}

Answer 1

因为

setState

在

asynchronous

中，所以你看不到

setState

之后的新状态。如果你想看到

arrData

的变化，可以使用

useEffect

:

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

Answer 2

任何 React hook 中的 Setter 都是异步的。 React 在底层设置状态并触发事件以重新渲染组件或依赖于该状态的任何更改，所有这些都是异步的。

setArrData

设置数据，但要读取更新的数据，出于上述原因，您应该使用

useEffect

钩子。

useEffect(()=>
    console.log(arrData); <-- on first render the value here will be what you have assigned while defining the state i.e. [] in this case.
}, [arrData]) <--- this is dependency array, 
                   that tell this *useEffect* to run when *arrData* state changes