setState 在 axios fetch 中不起作用

Question

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仍然出现在我试着登录的结果，我得到我的数据Im寻求帮助，请！也试过在es6中使用箭头函数还是不行setState

Answer 1

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

正如评论中所说，您的主要问题是将您的状态记录在错误的位置。由于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>;
  }
}