Question

我试图简单地从此用户API中提取并将数组置于状态中的用户变量中。然后，我将其打印在componentDidMount（）中，但它打印为“未定义”。

state = {
      users: [],
    }


  componentDidMount() {
    this.getCaseCount();
    console.log(this.state.users);
  }

//CoronaVirus API Goes here
getCaseCount(){
  fetch(`https://jsonplaceholder.typicode.com/users`)
  .then(response => response.json())
  .then(data =>
    this.setState({
      users: data,
    })
  )
}

Answer 1

在安装组件时，将调用getCaseCount（）并从

获取数据

https://jsonplaceholder.typicode.com/users

在等待来自API的响应时，它会继续进行下一部分并记录状态，但由于未接收到数据，因此此时状态未更新，因此显示状态的初始值是一个空数组。

一旦收到来自API的响应，就会重新呈现组件，但是componentDidMount仅运行一次，因此您看不到其中的更新状态。

要查看更新的状态，请在渲染器中写入console.log（this.state）。

state = {
      users: [],
    }


  componentDidMount() {
    this.getCaseCount();
    console.log(this.state.users);
  }

//CoronaVirus API Goes here
getCaseCount(){
  fetch(`https://jsonplaceholder.typicode.com/users`)
  .then(response => response.json())
  .then(data =>
    this.setState({
      users: data,
    })
  )
}

render{
   console.log(this.state.users)
}

Answer 2

工作正常。尝试将console.log放在render()内，您会看到数组中有东西。

在您的componentDidMount中，获取数据需要一些时间，这就是为什么它最初显示为空数组的原因。

反应setState不更新状态

2 个答案: