时间戳

首页 > 解决方案 > setState 在 axios fetch 中不起作用

javascript - setState 在 axios fetch 中不起作用

问题描述

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并且我得到了我的数据我正在寻求帮助！也试过在 es6 中使用箭头函数还是不行console.lognullsetState

标签： javascriptreactjsfetchnodesaxios

解决方案

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

正如评论中所说，您的主要问题是将您的状态记录在错误的位置。既然setState是异步的，就放一个之后就不行了console.log。在这里，您有两个选择。

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

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

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

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

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

第二个问题，实际上不是问题，但也许不是必需的，你不需要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>;
  }
}

推荐阅读