反应钩子useState不能存储json或字符串答案

【问题标题】：react hook useState can not store json or string反应钩子useState不能存储json或字符串
【发布时间】：2020-02-16 00:11:22
【问题描述】：

正如标题所说，react hook useState 似乎无法存储我的字符串

这是我的代码

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);
                    console.log(data);
                });
    }, []);

第一个“console.log”，我可以得到正确的字符串。

[{"shoes":1}, {"shirt":2}]

但是第二个“console.log”，我得到一个空字符串。

null

还是我的错？

【问题讨论】：

Executing async code on update of state with react-hooks的可能重复

标签： javascript reactjs

【解决方案1】：

setState 是 async。因此，您无法在设置状态后立即获取数据。

如果您在设置状态后尝试console.log 状态，您将始终获得先前的状态。

如果你想获取新数据，那么你应该有专门的useEffect钩子和依赖数组，

useEffect( () => {
   console.log(data)
},
[data] //This is dependency and it will run only when data is changed
)

【讨论】：

此外，如果 setData 是同步的，则数据仍然为 null，因为 const [data, setData] = useState(null); 行将在下一次渲染之前执行。

【解决方案2】：

问题的标题具有误导性。我的意思是，它是否是 json 字符串并不重要。解决方案很简单，只需将 console.log(data); 移出useEffect 块并在return 之后（如果之前return 将无法响应）。这可能是原始海报想要的。

【讨论】：