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

我在react中遇到了当前的情况，其中状态未设置，并且if set不能在渲染中使用

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)

{
this.state.data.map（函数（val）{
{val.templateFields}

}，本页）

---

得到一个简单的承诺并使用它真的有那么困难吗？有没有更好的方法可以做到这一点，我可能不知道吗？

首先，始终使用箭头函数而不是经典的

函数

声明，这样你就可以自动传递

这个
上下文

关于您的
控制台.log
在
componentDidMount
中设置状态后，不要尝试记录该状态，您请求的设置状态是异步的

您应该始终将状态记录在渲染中，或者有时可能记录在
componentdiddupdate
中

看看这个，这应该是可行的：

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>
    );
}

componentDidMount（）{
axios.get(`http://nextgen-bcs-dev-1008264651.ap-south-1.elb.amazonaws.com/templateConfig/site6/VAULT`)
。然后（（响应）=>{
这是我的国家({
数据：response.data
});
}).catch（（错误）=>{
控制台错误（error）；
});
}
渲染（）{
console.log（this.state.data）
返回(

{
this.state.data.map（（val）=>{
{val.templateFields}

})
}

);
}

如果没有，那么您的问题就在其他地方。
在
react
中使用箭头函数，因为
react
是一种方式绑定，而另一个问题是如果您想将某些东西呈现给
dom
，那么您需要返回它。在
映射中，您只需
迭代
但不返回
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>
   );
 } 
}

导出默认类测试扩展组件{
状态={
数据：[]
};
componentDidMount（）{
axios.get（）https://jsonplaceholder.typicode.com/todos/）。然后（响应=>{
这是我的国家({
数据：response.data
});
});
}
render（）{
返回(

{
this.state.data.map（函数（val）{
返回(
{val.title}

)
})}

);
} 
}