无法访问正确的这样的一个爱可信回调内[复制]

Question

这个问题已经在这里有一个答案：

• How to access the correct `this` inside a callback? 10个回答

有一个小心思屁大气压。我已经成功地写下面的代码，它从网址下载一个JSON，并将其显示在屏幕上：

export default class Appextends React.Component {

constructor(props) {
    super(props);
    this.state = {
      data: [],
    }
  }

  componentWillMount() {

    axios.get(//url//)
      .then(function (response) {
        localStorage.setItem('data', JSON.stringify(response.data));
        //this.setState({data: response.data}); -- doesnt work
      })
      .catch(function (error) {
        console.log(error);
      })
  }

  render() {
    let items = JSON.parse(localStorage.getItem('data'));
    return (
      <ul>
        {items.map(v => <li key={v.id}>{v.body}</li>)}
      </ul>
    )

  };
}

但是...这是奇怪的，因为如果我想存储在状态对象中的数据内接收到的JSON，但是当我试着这样做，它说，状态变量犯规确实存在...

这是什么意思？由于它的组件将安装功能，状态犯规还存在，所以这就是为什么林无法存储接收到的数据呢？

有没有办法通过这个来得到什么？非常感谢

P.S：实际解决方案的工作，但它是相当低质量的，在这种情况下使用本地存储。

在那儿

Answer 1

问题不在于国家不存在，那就是你不使用的状态正确的上下文。

您需要bind的axios callback function，否则this内将参考其自己的上下文，而不是该反应的成分

axios.get(//url//)
  .then( (response) => {
    this.setState({data: response.data});
  })
  .catch( (error) => {
    console.log(error);
  })

在渲染

render() {
    return (
      <ul>
        {this.state.data.map(v => <li key={v.id}>{v.body}</li>)}
      </ul>
    )

  };