javascript - 无法在 axios 回调中访问更正此问题

标签 javascript json reactjs axios

<分区>

有一个有点脑残的自动取款机。我设法编写了以下代码,它从 url 下载 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 存储在状态对象的数据中,但是当我尝试这样做时,它说状态变量实际上不存在...

这是什么意思?由于它是component WILL mount 函数,状态还不存在,所以这就是为什么我无法将接收到的数据存储在那里?

有什么办法可以解决这个问题吗?非常感谢

P.S:实际解决方案有效,但质量很低,在这种情况下使用本地存储。

有没有

最佳答案

问题不是状态不存在,而是你没有使用正确的状态上下文。

需要bindaxios回调函数,否则里面的this会引用自己的context,而不是react组件的context

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

  };

关于javascript - 无法在 axios 回调中访问更正此问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44230120/

相关文章:

javascript - 如何在json文件中添加或插入记录

Javascript 内联工作但不能在文件中工作

json - iOS 中的访问分页 - 上一个和下一个 : retrieved in JSON from facebook graph-api

java - https : Authorization 401

c# - 如何将 List<object> 转换为 Json 格式并在 C# 中填充 <tbody>?

reactjs - 开关是做什么的?

javascript - 将事件添加到 react 组件中的视频 html5 标签

javascript - React 组件重新挂载到另一个组件 props 更改

javascript - 如何从 html 类中删除额外的 ""组?

javascript - TypeError : Object. 条目要求输入参数在 React Native 中不为空或未定义