setState不更新状态[重复]

Question

我正在从一个文件导出常量并将其导入另一个文件，如下所示：

常数.js

export const radio = {
  id: 0,
  name: 'station name',
  encodedName: 'stationName',
  url: 'http://www.some-station.io/',
  src: 'http://127.0.0.1:80/autodj',
};

App.js

import React, { Component } from 'react';
import RadioService from './services/radio';
import { radio } from './constants';

class App extends Component {
  constructor() {
    super();
    this.state = {
      stream: {
        np: undefined,
        src: undefined,
        playing: false
      }
    };
  }

  componentWillMount() {
    this.startStream();
  }

  startStream = () => this.setState({ stream: { np: radio.name, src: radio.src } });

  render() {
    return (
      <div>
        <h4>Hello World...</h4>
      </div>
    );
  }
}

export default App;

我希望我的初始状态是在构造函数中设置的，然后在componentWillMount上，我希望使用常量文件中的值设置状态，然后再围绕组件和流添加进一步的逻辑。

但是，我发现，我的状态没有被更新，如果我在调用setState之后记录控制台日志，状态仍然没有定义，如果我引入一个方法，需要state中的值，那么在执行堆栈的后面，它没有被设置。

例如：

  startStream = () => {
    this.setState({ stream: { np: radio.name, src: radio.src } });
    this.exampleMethod();
  };

  exampleMethod = () => console.log(this.state);

这返回：

{stream: {…}}stream: {np: undefined, src: undefined, playing: false}

然而，我可以在构造函数中设置一些值，但是尝试设置进一步的状态是不适用的

例二：

class App extends Component {
  constructor() {
    super();
    this.state = {
      stream: {
        np: radio.name,
        src: radio.src,
        playing: false
      }
    };
  }

  componentWillMount() {
    this.startStream();
  }

  startStream = () => {
    this.setState({ ...this.state, stream: { playing: true } });
    this.exampleMethod();
  };

Answer 1

setState是异步的，因此如果在之后立即使用console.log，则不会获得新状态。

reactjs中的设置状态为异步或同步

Answer 2

setState是一个异步函数。不能期望在setState语句之后立即更新状态。

但是，您可以通过以下任一方式检查状态：

>

在render（）方法中放置console.log（this.state）。

或者在setState

this.setState（{…this.state，流：{播放：true}}，（）=