Question

我有这种当前情况，即状态未设置，如果设置不能在渲染中使用。

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)

做出一个简单的承诺真的很难做出反应吗？有没有可能我不知道的更好的方法呢？

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渲染某些东西，则需要将其返回。在您的map函数中，您只有iterate，但没有任何内容返回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响应设置状态并在渲染中使用它

2 个答案: