Question

所以我有一个组件显示从外部API获取的一些数据并保存到localStorage。我已经放了一个fetchData（）函数来完成这项工作，我从componentWillMount（）中调用了这个函数。它看起来像这样：

  componentWillMount() {
    this.fetchData();
  }

  ...

  fetchData() {
    if(localStorage.myData === undefined) {
      fetch(apiUrl,{
        method: 'GET',
        headers: ...
      })
      .then(function(data) {
        localStorage.setItem('myData', data);
      }).catch(function(error) {
        // error handling
      })
    } else { return true; }
  }

这里的想法是检查每个渲染是否在localStorage中设置数据，否则获取它，保存数据然后重新渲染。但是，在将数据存储在localStorage后，我无法让它重新呈现。我尝试在fetchData函数中使用this.setState({data: data})，但this未定义。

我在这里做错了什么？提前谢谢。

Answer 1

您的类中的

this与then（）函数内的this具有不同的上下文。对于您的特定情况，您可以执行以下操作

 fetch(apiUrl,{
    method: 'GET',
    headers: ...
  })
  .then(function(data) {
    // This now refers to your component
    this.setState({data: data});  
  }.bind(this))
   .catch(function(error) {
    // error handling
  })

或者正如Utro建议的那样，您可以使用不会创建自己的上下文的arrow functions，从而允许您恰当地使用this。

 fetch(apiUrl,{
    method: 'GET',
    headers: ...
  })
  .then(data => {
    // This now refers to your component
    this.setState({data: data}); 
  }).catch(function(error) {
    // error handling
  })

Answer 2

这个对象里面.then将引用Promise的对象调用而不是Component的对象。

vat that = this;

声明一些变量，然后你可以使用

that.setState({})

ReactJS：如何在获取数据后重新呈现组件

2 个答案: