从 axios 响应设置状态并在渲染中使用它

Question

我在 React 中遇到了这种情况，其中状态未设置，如果设置不能在渲染中使用。

componentDidMount() {
    axios.get(`url`)
        .then(function(response){
            const test = response.data;
            this.setState({
                data:test
            });
        }.bind(this));
      setTimeout(function test(){
          console.log('filterdata',this.state.data);
      },2000);
}

这是我一直在尝试使用的示例代码，但这里的问题是即使我将状态设置为全局状态，它也不包含该值。我已经完成了绑定以防止相同的情况。我也尝试了另外两件事

componentDidMount() {



    axios.get(`url`)
        .then((response)=>{
            this.setState({
                data:response.data
            });


});
      setTimeout(function test(){
          console.log('filterdata',this.state.data.templateFields);

      },6000);
}

还有这个

componentDidMount() {

    var self = this;

    axios.get(`url`)
        .then(function demo(response){
            self.setState({
                data:response.data
            });


});
      setTimeout(function test(){
          console.log('filterdata',self.state.data.templateFields);
      },6000);
}

最后一个在 self 中有值，但不能在我使用 "this" 的渲染器中使用，就像这样

<ul className="filter-options">
                            {
                                this.state.data.map(function(val){
                                <p>{val.templateFields}</p>

                            }, this)

获得一个简单的 promise 并使用它真的很难做出反应吗？有没有更好的方法来做到这一点我可能不知道？

Answer 1

首先，始终使用箭头函数而不是经典的 function 声明，这样您就可以自动传递 this 上下文。

关于您的 console.log 在 componentDidMount setState 中设置状态后不要尝试记录状态，您的请求是异步的。

您应该始终在渲染中记录状态，或者有时可能最终会在 componentDidUpdate 中记录状态。

看看这个，这应该有效：

componentDidMount() {
    axios.get(`http://nextgen-bcs-dev-1008264651.ap-south-1.elb.amazonaws.com/templateConfig/site6/VAULT`)
        .then((response) => {
            this.setState({
                data: response.data
            });
        }).catch((error) => {
            console.error(error);
        });
}

render () {
    console.log(this.state.data)
    return (
        <ul className="filter-options">
            {
                this.state.data.map((val) => {
                    <p>{val.templateFields}</p>
                })
            }
        </ul>
    );
}

如果不是，那么您的问题出在其他地方。

Answer 2

在 react 中使用箭头函数，因为 react 是一种绑定方式，另一个问题是如果你想将某些东西呈现给 dom 那么你需要 return它。在你的 map 函数中你只有 iterate 但没有 return 到 dom

这是一个简单的代码示例

export default class Test extends Component {
 state = {
   data: []
 };
 componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/todos/').then(response => {
    this.setState({
      data: response.data
    });
  });
}
render() {
 return (
   <div>
     <ul className="filter-options">
       {
         this.state.data.map(function(val) {
           return(
             <p>{val.title}</p>
           )
         })}
     </ul>
   </div>
   );
 } 
}

从 axios 响应设置状态并在渲染中使用它

Setting state from axios response and using it in render

reactjs

axios

react-state-management