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

Question

正如标题所说，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 字符串。

null

或者我的错误？

Answer 1

setState是async的。 所以在设置 state 后，您无法立即获取数据。

如果您在设置 state 后尝试console.log state，您将始终得到以前的 state。

如果你想获取新数据，那么你应该有一个带有依赖数组的专用useEffect钩子，

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

Answer 2

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