setState 在 axios fetch 中不起作用答案

【问题标题】：setState not working inside axios fetchsetState 在 axios fetch 中不起作用
【发布时间】：2018-08-23 15:58:55
【问题描述】：

class ItemsPage extends React.Component {

  constructor(props)
  {
    super(props)
    this.state = {items: null }
    this.fetchImages = this.fetchImages.bind(this)
  }


  fetchImages()
  {
    var self = this

    axios.get('https://api.instagram.com/v1/users/self/media/recent/?access_token=')
      .then(function (result)  {
        const items = result
        self.setState({ items: 'test' })
      });

  }

  componentDidMount()
  {
    this.fetchImages()
    console.log(this.state.items)
  }

  render () {

    return (

      <div>Test</div>


    );

  }
}

我将items 设置为null 和console.log，而null 仍然出现我已经尝试记录结果，我得到了我的数据我正在寻求帮助！也试过在es6中使用箭头函数还是不行setState

【问题讨论】：

你在哪里打电话fetchImages()？你在哪里记录结果？
在componentDidMount中
你能展示你剩下的组件代码吗？
你在哪里检查状态是否设置？因为 setState 是一个异步函数调用。调用 setState 函数后，将不会立即看到新状态。
When use ComponentDidMount() I found this error : Can't call setState的可能重复

标签： javascript reactjs fetch nodes axios

【解决方案1】：

让我们收集所有的 cmets 和建议，然后提供答案:)

您的主要问题，如 cmets 所述，将您的状态记录在错误的位置。由于setState 是异步的，所以在放置console.log 之后就不起作用了。在这里，您有两个选择。

第一个是在您的 setState 方法中使用回调。

self.setState({ items: "test" }, () => console.log(this.state.items))

您的第二个选择是在您的render 方法中使用console.log。

render () {
    console.log( this.state.items );
    return (
    ...

因此，在第一次渲染中，您会看到初始值，在更新后您会看到数据。请记住，切勿在 render 方法中使用 setState，但在这里记录您的状态是可以的。

第二个问题，实际上不是问题，但也许没有必要，你不需要在你的函数中使用var self = this。如果您使用箭头函数而不是常规函数，则可以直接在此处使用this，因为箭头函数不会创建自己的作用域。

axios.get('https://api.instagram.com/v1/users/self/media/recent/?access_token=')
    .then( result => this.setState({ items: 'test' })
);

所以，你的整个组件应该是这样的：

class ItemsPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = { items: null }
    this.fetchImages = this.fetchImages.bind(this)
  }

  fetchImages() {
    axios.get( "https://api.instagram.com/v1/users/self/media/recent/?access_token=" )
      .then(result => this.setState({ items: "test"} )
    );
  }

  componentDidMount() {
    this.fetchImages();
  }

  render() {
    console.log( this.state.items );
    return <div>Test</div>;
  }
}

如果你有合适的 Babel 插件和配置，你甚至可以使用 class-fields 提案来简化你的代码。

class ItemsPage extends React.Component {
  state = { items: null };

  fetchImages() {
    axios.get( "https://api.instagram.com/v1/users/self/media/recent/?access_token=" )
      .then((result) => this.setState({ items: "test"} )
    );
  }

  componentDidMount() {
    this.fetchImages();
  }

  render() {
    console.log( this.state );
    return <div>Test</div>;
  }
}

在当前情况下，您不需要绑定函数。但请记住，如果您在回调中（如在按钮中）使用此 fetchImages，则需要绑定它。如果你使用箭头函数，它会自动绑定。

class ItemsPage extends React.Component {
  state = { items: null };

  fetchImages = () =>
      axios.get( "https://api.instagram.com/v1/users/self/media/recent/?access_token=" )
      .then((result) => this.setState({ items: "test"} )
    );

  componentDidMount() {
    this.fetchImages();
  }

  render() {
    console.log( this.state );
    return <div>Test</div>;
  }
}

【讨论】：