入れ子状態のReactJS変更値

Question

私は入力が初期値（入力ごとに異なります）を持つ形式です。ユーザーstartesは、入力フィールドに何かを入力すると

function createData(header, content) { 
    id += 1; 
    return {header, content, id}; 
} 

class ExampleForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     data : [ 
      createData(Header1, Content1), 
      createData(Header2, Content2), 
      createData(Header3, Content3), 
     ] 
} 

、私は問題の状態の値を変更する必要があり、対応する配列で：私はそうのように、状態配列内のデータを保存することで値を設定しましたしかし、私はその状態を正しく対象とすることに問題があります。

これは私が現在やっているものです：

handleInputChange = (value, target) => { 

     const selectedArray = {...this.state.data[target]}; 
     selArray.header = value; 
     this.setState(selArray); 
    }; 

} 

を（注：値が新しい値であり、ターゲットはインデックスである）

しかし、それは動作しません、私はconsole.log()とき理由新しい値、それはまだ古い値を返します。

私はここでもいくつかの質問を読んでいます（値を変更する関数でコードを書いているのを助けてくれました）が、うまくいきませんでした。 その他の質問はReact: Update nested state?が含まれていますが、どこから届いたかはわかりませんでしたgetPersonsData()誰でも私の現在のコードで間違っていることを知っていますか？どうすれば修正できますか？

Answer 1

更新このような状態：

handleInputChange = (value, target) => { 
    const data = [...this.state.data]; 
    data[target].header = value; 
    this.setState({ data }); 
}; 

はこのように、更新された状態値、使用のコールバックメソッドを確認するには：

handleInputChange = (value, target) => { 
    const data = [...this.state.data]; 
    data[target].header = value; 
    this.setState(
     { data }, 
     () => console.log('updated state', this.state.data) 
    ); 
}; 

をSETSTATEのASYN動作の詳細については、この答えを確認してください。 Why calling setState method doesn't mutate the state immediately?