Question

我想用api的另一个响应更新状态后呈现状态

组件上的

确实挂载了我发出的来自随机用户的请求，并将其存储在状态中，并且我做出了一个按钮，该按钮在单击时发出了另一个请求，并以api的状态存储了另一个用户，我的问题是我似乎无法呈现我在console.log上看到了新状态（单击按钮后已更新），但是看到了更新后的状态，但是当我尝试渲染时，我只得到了初始值，其余的都显示为未定义

state = {
   persons : []
}

async componentDidMount( ){
     let response = await axios(`https://randomuser.me/api/?results=1`)
     this.setState({
       persons: response.data.results
     })
  }
update = async () => {
    const response = await axios(`https://randomuser.me/api/?results=1`)

    this.setState(prevState => ({
      persons: [...prevState.persons, response.data.results]
    }))
  }

render(){
    const test = this.state.persons.map( i => i.cell)
    return(
      <div>
      {test}
      <button onClick={this.update}>update</button>
      </div>
    )
  }

Answer 1

您需要设置正确的状态。响应是一个数组，因此您需要合并两个数组

update = async () => {
  const response = await axios(`https://randomuser.me/api/?results=1`)

  this.setState(prevState => ({
    persons: [...prevState.persons, ...response.data.results]
  }))
}

Answer 2

这应该有效

render(){
  const test = this.state.persons.map( i => {
    return(
      <div>{i.cell}</div>
    )
  })

  return(
    <div>
      {test}
      <button onClick={this.update}>update</button>
    </div>
  )
}

使用axios的响应更新状态后的渲染状态

2 个答案: