Question

我有问题，我不确定是什么引起了问题。

所以我已经完成了使用外部api的提取，并且希望从api中打印出一些信息。我已经记录了数据和状态变量，以查看它们是否返回数据。我的问题是我没有从控制台的状态变量中获取任何数据。当我在控制台中登录时，它仅显示一个空数组。但是，当我登录console.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)
  }, [])

  // ...
}

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

1 个答案: