无法在 axios 回调中更正此问题 [重复]

Posted 2023-02-22

【中文标题】无法在 axios 回调中更正此问题 [重复]

【英文标题】：Cannot access correct this inside an axios callback [duplicate]

【发布时间】：2017-10-29 00:47:00

【问题描述】：

有点放屁的atm。我设法编写了以下代码，它从 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 存储在 state 对象中的数据中，但是当我尝试这样做时，它会说 state 变量实际上并不存在...

这是什么意思？既然是component WILL mount功能，状态还不存在，所以我无法将接收到的数据存储在那里？

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

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

有吗

【参考方案1】：

问题不在于状态不存在，而在于您没有为状态使用正确的上下文。

你需要bindaxios callback function，否则里面的this会引用它自己的上下文而不是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>
    )

  ;