react:setState 没有按预期产生结果(不工作?)

IT技术 javascript cordova reactjs
2021-05-08 03:33:05

我的项目是 Cordova + React(es6)。我在使用 setState() 时遇到了一些问题。

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

我的项目的 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!!!!!!!!
    }
  .....
}

我该怎么办???

2个回答

ReactsetState()是一个异步操作,因此它不会在您的代码中调用它后立即交付结果。如果添加仅在完成时调用的render()方法中,您可以访问更新的状态console.log(this.state.data_source); this.setState()

看看 React 文档:https ://facebook.github.io/react/docs/component-api.html#setstate

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。没有对setState调用同步运行的保障,呼叫可能会分批进行性能提升。

除非在 shouldComponentUpdate() 中实现了条件渲染逻辑,否则setState() 将始终触发重新渲染

除了 Piotr'a 答案之外,setState还可以传递一个使用新状态调用的回调,例如;

  this.setState({data_source: final_cash_data}, function(newState){
    console.log(newState.data_source)
  });