陣營：的setState不會使結果與預期（不工作？）

我的項目是科爾多瓦+陣營（ES6）。我有一些使用setState（）的問題。陣營：的setState不會使結果與預期（不工作？）

傳遞到國家的數據是不是空的。但是，將數據傳遞給狀態，我收到結果狀態爲空。

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

，我應該怎麼辦???

來源

2016-10-01 mackeee

陣營setState()是一個異步操作，因此不提供它被稱爲在你的代碼後的結果。您可以訪問更新的狀態你，如果添加console.log(this.state.data_source);渲染（）方法其內部僅調用時this.setState()完成。

有一個looke一個的陣營文檔：https://facebook.github.io/react/docs/component-api.html#setstate

的setState（）不會立即發生變異this.state而造成掛起狀態轉變。調用此方法後訪問this.state可能會返回現有值。有無法保證對setState的調用進行同步操作，並且可能會調用調用以提高性能。

setState（）將始終觸發重新渲染，除非在shouldComponentUpdate（）中實現了條件渲染邏輯。

來源

2016-10-01 08:02:42

謝謝！我明白:) – mackeee

很高興我可以幫助:)答案是否提供解決方案給你的問題，或者你想我添加任何東西？ –

是的！感謝你我能解決這個問題:) – mackeee

除了Piotr'a的回答，setState可以傳遞一個回調，這個回調被稱爲新狀態，例如：

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

來源

2016-10-01 08:13:18

陣營：的setState不會使結果與預期（不工作？）

回答

相關問題