时间戳

首页 > 解决方案 > 使用来自 axios 的响应更新状态后渲染状态

reactjs - 使用来自 axios 的响应更新状态后渲染状态

问题描述

我想在我用来自 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>
    )
  }

标签： reactjs

解决方案

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

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

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

推荐阅读