我的 useEffect 代码出了什么问题，为什么我的状态变量为空？

Question

>我有一个问题，我不确定是什么导致了问题。

所以我用外部 api 完成了一个获取，我想从 api 中打印出一些信息。我已经记录了数据和状态变量，看看它们是否返回数据。我的问题是我没有从控制台中的状态变量获取任何数据。当我在控制台中登录它时，它只显示一个空数组。但是当我记录控制台时，我在控制台中获取数据.log(data(。

当我在useEffect结束时删除空数组时，它在控制台中工作，但它是一个无限循环。如果我将状态变量放在空数组中，也会发生同样的事情。

有谁知道问题可能是什么？

export const Communication = () => {
const [article, setArticle] = useState([])
useEffect(() => {
fetch('https://cors-anywhere.herokuapp.com/https://api.fortnox.se/3/articles', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Access-Token': accessToken,
'Client-Secret': clientSecret
}
})
.then((res) => res.json())
.then((data) => {
setArticle(data)
console.log('json', data)
console.log('article', article)
})
}, [])

Answer 1

想想JavaScript是如何工作的。使用此语句，您可以声明两个变量：

const [article, setArticle] = useState([])

如果你考虑article，对外部函数的调用将不能article赋值给新值。这不仅仅是因为它const;即使使用了let，外部函数也无法更改它;我们没有类似指针的东西。这与这里发生的事情没有什么不同：

function a() {
let foo = 1;
changeFoo(2);
}
function changeFoo(newValue) {
// How do I change `foo` inside of function `a`? Spoiler, I cannot!
}

同样，调用setArticle也无法更新项目值。这不是 React 的工作方式。相反，下次组件调用useState时，它将收到新值。因此，这就是为什么：

setArticle(data);
console.log(article);

。将记录article的旧值。这并不意味着setArticle不起作用;这意味着你期望 React 有点太神奇了。article将在下次调用时分配新值，改为在下一次渲染时useState。如果要记录更改的文章状态，则需要执行以下操作：

export const Communication = () => {
const [article, setArticle] = useState([])
console.log('article', article);
useEffect(() => {
fetch('https://cors-anywhere.herokuapp.com/https://api.fortnox.se/3/articles', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Access-Token': accessToken,
'Client-Secret': clientSecret
}
})
.then((res) => res.json())
.then(setArticle)
}, [])
// ...
}