无法在axios回调中访问正确的内容 [英] Cannot access correct this inside an axios callback

问题描述

得到了一点心灵放屁atm。我设法编写以下代码，从网址下载JSON并将其显示在屏幕上：

  export default class Appextends React.Component {
 
构造函数（道具）{
 super（道具）; 
 this.state = {
 data：[]，
} 
} 
 
 componentWillMount（）{
 
 axios。 get（// url //）
 .then（function（response）{
 localStorage.setItem（'data'，JSON.stringify（response.data））; 
 // this。 setState（{data：response.data}）;  - 不工作
}）
 .catch（函数（错误）{
 console.log（错误）; 
}） 
} 
 
 render（）{
 let items = JSON.parse（localStorage.getItem（'data'））; 
返回（
< ul> 
 {items.map（v =>< li key = {v.id}> {v.body}< / li>） } 
< / ul> 
）
 
}; 
} 
  

但是 ......这很奇怪，因为如果我想将收到的json存储在状态对象中的数据中，但是当我试图这样做时，它表示状态变量实际上不存在...

<这是什么意思？由于它的组件将安装功能，状态还不存在，这就是为什么我无法在那里存储接收到的数据？

有没有办法解决这个问题？非常感谢

PS ：实际解决方案有效，但在这种情况下使用本地存储的质量相当低。

是否

解决方案

问题不在于状态不存在，这是因为你没有使用正确的状态上下文。

你需要 bind axios回调函数，否则这里面的将引用它自己的上下文而不是react组件的上下文

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

got a little mind-fart atm. I've managed to write following code, which downloads a JSON from url and displays it on the screen:

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

  };
}

But... this is weird, because if I would like to store the received json inside the data in the state object, but when Im trying to do so, it says that the state variable doesnt exist actually...

What does it mean? Since it's component WILL mount function, the state doesnt exist yet, so thats why Im unable to store the received data there?

Is there any way to get through this? Thank you so much

P.S: Actual solution works, but it's pretty low quality, to use local storage in this case.

Is there

解决方案

The problem is not that the state doesn't exist, it is that you are not using the correct context for state.

You need to bind the axios callback function, otherwise this inside it will refer to its own context rather than that of the react component

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

and in render

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

  };

这篇关于无法在axios回调中访问正确的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！