我有嵌套表格對象，但我嘗試使用一個處理程序SETSTATE，不知何故不工作計算樣式反應不起作用
constructor() {
super()
this.state = {
form: {
name: '',
location: ''
}
}
}
handleFormInput = (event) => {
this.setState({
[this.state.form[event.target.name]]: event.target.value
})
setTimeout(() => {
console.log(this.state.form)
},50)
}
event.target.name可以的名稱和位置。
您無法直接訪問和setState函數內修改動態狀態，你更希望得到的狀態對象的副本，並對其進行修改。另外，您也許已經知道setState爲async，因此您有setTimeout函數，因爲setState爲您提供callback函數，因此在狀態發生更改時執行此函數。
handleFormInput = (event) => {
var form = {...this.state.form}
form[event.target.name] = event.target.value;
this.setState({
form
},() => {this.state.form})
}
哦，怪不得，提醒狀態是不可改變的。謝謝！！ –
我認爲此代碼不能正常工作：
this.setState（{ [this.state.form [event.target.name]：event.target.value }）
替代方案是：
handleFormInput = (event) => {
//New code
let obj = {}
obj[this.state.form[event.target.name]] = event.target.value
this.setState(obj,() => { console.log(this.state.form) })
}
，以查看更新state，的使用回調函數PARAM 0
的setState是異步的，你的狀態將正常通話後，不知何故更新。然後渲染將被再次調用。嘗試在渲染或componentWillUpdate檢查你的新狀態：https://facebook.github.io/react/docs/react-component.html#componentwillupdate
你不應該看在你的狀態的改變而改變你的狀態之後
能否請你澄清你的代碼，因爲旁邊的'構造函數（）' 'handleFormInput = ...'是無效的語法，如果是'handleFormInput：事件=> ...'我說的方法檢查'this'箭頭函數沒有自己的'this'對象，他們正在封閉周圍一個。或者確切地說'handleFormInput = event => ...'定義了什麼？上下文在這裏很重要。 – Thomas
@Thomas爲什麼不呢？它反應es6。 handleFormInput是我jsx中的onChange監聽器。 –
這就是我說的是上下文的一部分。所以'handleFormInput = ...'是'渲染（）' - 函數裏面？通過您的片段看起來就像告訴'handleFormInput'就在你的類中定義的，旁邊的'constructor'的方法。 – Thomas