useState 在 useEffect 中定义后保持初始状态

Question

我有一个从 API 获取一些数据的异步函数。因为我需要这些数据来正确加载我的组件，所以我决定在 useEffect 中获取数据，然后将其存储在 useState 中，这样就可以正常工作了。但是，如果我尝试用控制台记录它，它只会显示它的初始状态，从技术上讲这意味着它仍未设置，或者控制台日志在分配 useState 之前运行。

提前感谢您的帮助。

const [categories, setCategories] = useState([])

useEffect(() => {
    fetchListProductCats().then(function(result){
        setCategories(result.data)
    })
    console.log(categories) // returns -> []
    
}, []);

if(!categories.length){
    return "loading"
}

Answer 1

async 使用 Promise 函数，确保你知道它的含义。

此代码中的 console.log 行始终在 Promise 解析之前运行。

如果你想观察类别的变化，使用另一个useEffect:

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

Answer 2

您的状态已经更新为您希望其显示类别及其初始值的数据，因为您已经渲染了没有依赖项的 useEffect。它在更新之前得到了安慰。尝试使用以下代码片段进行记录。

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

Answer 3

React setState 是异步的。它不会在调用该函数后立即更新。它将首先通过重新渲染过程来更新用户界面。重新渲染完成后，将调用 useEffect 挂钩中提供的函数。

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

useState 在 useEffect 中定义后保持初始状态

useState keeps initial state after defining it in useEffect

javascript

reactjs

use-effect

use-state