无法在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屋!