React Hook useState无法存储JSON/字符串？代码执行异常求助

嘿，这完全不是useState的问题，是你对React状态更新的异步特性不熟悉导致的小误解哦！

为什么第二个console.log输出null？ #

setData（包括类组件的setState）是异步批量更新的操作——React为了优化性能，不会在你调用setData的瞬间就立刻修改data变量的值，而是会把这次更新放进队列，等合适的时机再统一处理。

所以你代码里的执行顺序是这样的：

1. 接口请求完成，拿到result，第一个console.log(result)输出正确的JSON数据
2. 调用setData(result)，告诉React“我要更新data状态啦”
3. 紧接着执行console.log(data)，此时React还没完成状态更新，data依然是初始的null

怎么确认数据真的被存储了？ #

你可以用两种方式验证状态是否成功更新：

• 方式一：用useEffect监听data的变化
  给useEffect添加data作为依赖项，当data完成更新时，这个effect会自动触发，此时就能看到最新的状态值：

  const [data, setData] = useState(null);
  useEffect(() => {
    fetch("http://api.localhost/user/shoppingcart", {
      headers: { Authorization: cookies.Authorization }
    })
    .then(res => res.json())
    .then( result => {
      console.log(result);
      setData(result);
    });
  }, []);
  
  // 监听data状态变化，输出最新值
  useEffect(() => {
    console.log("更新后的data:", data);
  }, [data]);
  

• 方式二：在组件JSX中渲染data
  直接把data渲染到页面上，你会看到请求完成后，页面会自动显示出正确的数组内容：

  return (
    <div>
      {data ? JSON.stringify(data) : "加载中..."}
    </div>
  )
  

总结 #

以后别再在调用setData之后立刻console.log状态变量啦，因为那时候状态还没完成更新！React的异步更新是为了性能优化，理解这个特性就能避免很多类似的困惑~

内容的提问来源于stack exchange，提问作者John Young