Question

我从一个文件导出一个const并将其导入到另一个文件中，如下所示：

constants.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}

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

示例2：

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是一个异步函数。您不能指望在setState语句之后立即更新状态。

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

在您的render（）方法中放置console.log(this.state)。
或在setState
之后使用回调
this.setState（{... this.state，stream：{playing：true}}，（）=＆gt; { 的console.log（this.state）; //应显示更新状态 }）;

Answer 2

setState是异步的，所以如果你在。之后立即调试.log，你将无法获得新的状态。

setState in reactjs is Async or Sync

setState不更新状态

2 个答案: