React：setState不会像预期的那样产生结果（不工作？） [英] React: setState does not make results just as expected(not working?)

问题描述

我的项目是Cordova + React（es6）。
我使用setState（）有一些问题。

My project is Cordova + React(es6). I have a few problem with using the setState().

传递给state的数据不为空。
但是，将数据传递到状态，我收到结果状态为空。

the data that is passed to state is not empty. But, passing the data to state, I receive results State is empty.

我的项目的env（package.json）：

My project's env(package.json):

{
  "name": "MYAPP",
  "version": "1.0.0",
  "description": "this is front of simula's app",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "browserify ./www/jsx/app.jsx -t babelify -o ./www/js/app.js"
  },
  "author": "maki",
  "license": "ISC",
  "dependencies": {
    "babel-preset-es2015": "^6.13.2",
    "browserify": "^13.1.0",
    "gulp": "^3.9.1",
    "history": "^4.2.0",
    "material-design-icons": "^2.2.3",
    "material-ui": "^0.15.4",
    "rd3": "^0.7.2",
    "react": "^15.3.0",
    "react-d3": "^0.4.0",
    "react-dom": "^15.3.1",
    "react-motion": "^0.4.4",
    "react-router": "^2.7.0",
    "react-swipeable-views": "^0.7.0",
    "react-tap-event-plugin": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "devDependencies": {
    "babel-cli": "^6.11.4",
    "babel-plugin-transform-class-properties": "^6.11.5",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-1": "^6.13.0",
    "babelify": "^7.3.0",
    "gulp-sass": "^2.3.2",
    "jquery": "^3.1.0"
  }
}

我的代码：

export default class SomeCard extends React.Component {
  constructor(){
    super();

    this.state = {
      data_source: []
    }
  }

  componentDidMount(){
    const {name, data} = this.props.data;
    if(name == 'AAA'){
      let values_a = data.map((tmp_data) =>{
        let date = new Date(tmp_data.date);
        return {
          x: date,
          open: tmp_data.open,
          high: tmp_data.high,
          low: tmp_data.low,
          close: tmp_data.close
        };
      });
      let final_tmp_data = [
        {
          name: name,
          values: values_a
        }
      ];
      console.log(final_tmp_data);  //NOT EMPTY
      this.setState({data_source: final_tmp_data});
      console.log(data_source);     //NOT EMPTY
    }else if(name == 'BBB'){
      let values_b = data.map((tmp_data) => {
        let date = new Date(tmp_data.date);
        let tmp_date = date.getFullYear();
        return {
          "x": String(tmp_date),
          "y": tmp_data.value
        };
      });
      let final_cash_data = [
        {
          "name": name,
          "values": values_b
        }
      ];
      console.log(final_cash_data);          //NOT EMPTY
      this.setState({data_source: final_cash_data});
      console.log(this.state.data_source);   //EMPTY!!!!!!!!
    }
  .....
}

我做了

推荐答案

React setState（）操作，因此它不会在您的代码中调用后立即提供结果。如果在render（）中添加 console.log（this.state.data_source）; ，您可以访问更新的状态 strong>方法，只有在 this.setState（）完成时才会调用。

React setState() is an async operation so it does not deliver the result immediately after it is called in you code. You can access the updated state you if add console.log(this.state.data_source); inside your render() method which is only called when this.setState() completes.

： https://facebook.github.io/react/docs/component- api.html＃setstate

setState（）不会立即改变this.state，而是创建一个挂起状态转换。在调用此方法后访问this.state可能会返回现有值。
有不保证对setState 的调用进行同步操作，并且可以批量调用以提高性能。

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

setState （）将始终触发重新呈现，除非在shouldComponentUpdate（）中实现条件呈现逻辑。

setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate().

这篇关于React：setState不会像预期的那样产生结果（不工作？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！