Question

如何在反应中使用axios加载响应数据？

我的componentdidmount：

var params = new URLSearchParams();
params.append('id', this.state.ids);

axios.post('http://127.0.0.1:8000/items/select/', params)
  .then(function(response, data){

    x => {

    let push = response.data.map((idb, index)=>{
        return(

          <SingleProduct takeid={idb} />    

            )
        })
    this.setState({dataSelection: push});
    }
  })

我想创建map response.data

Answer 1

您需要处理的事情很少

首先： bind axios callback方法，以便其中的this引用React组件上下文

第二：将响应保存在状态而不是组件映射

第三：在渲染中映射状态

state = {
    dataSelection: []
}
componentDidMount() {
  var params = new URLSearchParams();
  params.append('id', this.state.ids);

  axios.post('http://127.0.0.1:8000/items/select/', params)
    .then((response, data) => {
        this.setState({dataSelection: response.data});
      }
    })
}

render () {
   return (
      <div>
        {this.state.dataSelection.map((idb, index)=>{
          return(
               <SingleProduct takeid={idb} />    
            )
          })
        }
      </div>
   )
}

如何使用axios加载响应数据？

1 个答案: