중첩 된 상태의 ReactJS 변경 값

Question

입력이 초기 값 (각 입력마다 다름)이있는 양식이 있습니다. , I는 해당 어레이 질문에 상태 값을 변경할 필요가 입력 필드에 무언가를 입력하는 사용자가 재 기동되면

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

업데이트 이와 같은 상태는 : setState를의 asyn 행동이 답변을 확인에 대한 자세한 내용은

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

:

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

는 다음과 같이 업데이트 된 상태 값, 사용 콜백 방법을 확인하려면 : Why calling setState method doesn't mutate the state immediately?