2

我目前的情况是在没有设置状态并且设置不能在渲染中使用的情况下做出反应。

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

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

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)

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

4

2 回答 2

0

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

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

您应该始终在渲染中记录状态，或者有时可能在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>
    );
}

如果没有，那么您的问题在其他地方。

于 2018-08-13T08:16:09.023 回答
0

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>
   );
 } 
}
于 2018-08-13T08:36:22.710 回答