상태 배열의 항목을 편집하는 방법

상태 배열의 항목을 편집하는 방법

제 상태는 다음과 같습니다.

this.state = {
  ids: ['A', 'E', 'C']
};

인덱스 1의 E를 B로 바꾸려면 상태를 어떻게 수정해야 합니까?예를 들어 다음과 같습니다.

this.setState({
  ids[1]: 'B'
});

어떻게 해야 할까요?

내부 상태 개체를 수정하지 않도록 불변 연산을 사용하는 데 익숙해지는 것이 좋습니다.

리액트 문서에서 지적된 바와 같이:

나중에 setState()를 호출하면 변환이 대체될 수 있으므로 this.state를 직접 변환하지 마십시오.이 .state는 불변의 것으로 간주합니다.

이 경우 [1]을 사용하여 어레이의 새 복사본을 가져오고 [2] 복사본을 조작한 다음 [3] setState를 새 어레이와 함께 사용할 수 있습니다.그것은 좋은 연습이다.

뭐 이런 거:

const newIds = this.state.ids.slice() //copy the array
newIds[1] = 'B' //execute the manipulations
this.setState({ids: newIds}) //set the new state

사례 1: 인덱스를 알고 있는 경우 다음과 같이 쓸 수 있습니다.

let ids = [...this.state.ids];     // create the copy of state array
ids[index] = 'k';                  //new value
this.setState({ ids });            //update the value

케이스 2: 인덱스를 모르는 경우 먼저 array.findIndex 또는 기타 루프를 사용하여 업데이트할 항목의 인덱스를 가져온 후 값을 업데이트하고 setState를 사용합니다.

다음과 같이 합니다.

let ids = [...this.state.ids];  
let index = ids.findIndex(el => /* condition */);
ids[index] = 'k';                  
this.setState({ ids });            

다음은 setState에서 어레이의 특정 인덱스를 변경하는 다른 솔루션입니다.

this.setState({
  ...array,
  Object.assign([...array], { [id]: yourNewObjectOrValue })
})

@mayank-shukla가 기술한 내용(케이스 2)을 기반으로 Array.splice로 기술할 수도 있습니다.

const replacement = 'B';
let copy = [...this.state.ids]
copy.splice(index, 1, replacement)

this.setState({ 
   ids: copy,
})

REP의 예시

다음 두 가지 사항에 유의하십시오.

1. Array.splice 는 변이형입니다.동작하고 있는 어레이는 변경되지만,확산 연산자에 의해 어레이의 얕은 카피입니다.자세한 것은, 이하를 참조해 주세요.
2. 스플라이스 결과를 반환값으로 직접 할당할 수 없습니다.Array.splice는 실제로 삭제된 요소입니다.AKA: 에서 ID에 할당하려는 변수에 슬라이스 결과를 할당하지 마십시오.그렇지 않으면 삭제된 값만 남게 됩니다.

항목 1의 얕은 복사본과 깊은 복사본에 대한 후속 조치를 취하려면 개체 참조(질문의 문자열 리터럴과 비교)를 교체하는 경우 lodash의 cloneDeep와 같은 것을 사용해야 합니다.

하지만 여기에는 몇 가지 다른 방법이 있습니다.

SO 자체에 대한 얕은 것과 깊은 것에 대한 자세한 내용도 볼 수 있습니다.

this.setState({
  ids: [ids[1]='B',...ids].slice(1)
});

위의 코드는 값 'B'의 2개의 어레이 항목을 만듭니다.
하나는 시작 부분에, 다른 하나는 지정된 위치에 있습니다.슬라이스 연산자를 사용하여 첫 번째 배열 요소를 제거합니다.

또 다른 해결책은 스플라이스 연산자를 사용하여 직접 수행하는 것입니다.

this.setState({
  ids: [ids.splice(1,1,'B')]
})

이 질문이 오래됐다는 건 알지만 오늘 더 좋은 답이 나왔네요.

immer는 익숙한 API를 사용하여 불변의 객체를 변경하는 보다 합리적인 방법을 지원하기 위해 사용할 수 있습니다.함수를 에 넘겨줌으로써this.setState를 사용하여 상태를 변환할 수 있습니다.

this.setState(state => produce(state, state => {
  state.ids[1] = 'b'
}));

카레에 좀 더 카레를 .produce(fn)입니다.

this.setState(produce(state => {
  state.ids[1] = 'b'
}));

나는 깊은 주의 변화가 수반될 때 Immer는 훌륭하다는 것을 알게 되었지만, 그것이 공짜로 오는 것은 아니라는 것을 경고한다.

언급URL : https://stackoverflow.com/questions/42037369/how-to-edit-an-item-in-a-state-array