React 상태를 변경하는 데 선호되는 방법은 무엇입니까?

97

this.state.list자식 목록을 렌더링하는 데 사용할 수 있는 일반 개체 목록이 있다고 가정 해 보겠습니다 . 그렇다면 개체를 삽입하는 올바른 방법은 무엇입니까 this.state.list?

아래는 this.state문서에 언급 된대로 직접 변경할 수 없기 때문에 작동 할 것이라고 생각하는 유일한 방법 입니다.

this._list.push(newObject):
this.setState({list: this._list});

이것은 나에게 못생긴 것 같습니다. 더 좋은 방법이 있습니까?

javascript reactjs

— 코이
소스

의 중복 가능성 ReactJS의 상태 배열의 올바른 수정 , 요청 병합

— 산적

이 모든 대답은 배열에 요소를 추가하는 것입니다. 하지만 요소를 제거하는 것은 어떻습니까? 아니면 단순히 어레이를 새 어레이로 완전히 재설정하려면?

— Augustin Riedinger

165

concat 새 배열을 반환하므로 할 수 있습니다.

this.setState({list: this.state.list.concat([newObject])});

또 다른 대안은 React의 불변성 도우미입니다.

  var newState = React.addons.update(this.state, {
      list : {
        $push : [newObject]
      }
  });

  this.setState(newState);

— 더미
소스

6

concat배열을 취하므로 this.state.list.concat([newObject]).

— Sophie Alpert 2014 년

@BenAlpert는 Chrome에서 나를 위해 작동합니다. 이것이 비표준 동작이라고 말하는 것입니까?

— 힙

6

@Heap 음, 배열이 아닌 것을 전달하면 배열로 concat래핑되지만 배열을 명시 적으로 추가하는 것이 좋습니다 . 다음 요소 [[1,2], [3,4]]로 추가 [5,6]하려면 .concat([[5,6]])다른 작업을 수행해야 합니다. 로 끝납니다 [[1,2], [3,4], 5, 6].

— Sophie Alpert 2014 년

2

불변성 도우미 뒤에있는 아이디어에 감사하는만큼 (그리고 어쨌든 그것을 사용하게 될지도 모릅니다), Array.concat확실히 다른 라이브러리를 추가 하는 것보다 낫습니다 .

— Shawn Erquhart

1

this.state에서 파생 된 값으로 this.setState를 호출하면 업데이트 일괄 처리 문제가 발생하지 않습니다. 발생할 문제를 보여주는 jsfiddle에 연결되는 stackoverflow.com/a/41445812/1998186 을 참조하십시오 .

— NealeU

40

setState () 는 함수를 매개 변수로 사용하여 호출 할 수 있습니다.

this.setState((state) => ({ list: state.list.concat(newObj) }))

또는 ES5 :

this.setState(function(state) {
  return {
   list: state.list.concat(newObj)
  }
})

— Nyalab
소스

2

@Arian : React는 새로 추가 된 요소 만 렌더링하는 데 필요한 필수 DOM 변이 명령을 예상합니다. 물론 새로 추가 된 요소는 이전 요소가 렌더링되는 방식을 변경하지 않습니다.

— Jose Browne

1

이것은 환상적인 대답이며 푸시를 수행하기 위해 배열을 연결하는 것보다 훨씬 깨끗하다고 생각하지만 그게 내 생각입니다.

— Matt Styles

2

@Nyalab은 함수 본문을 괄호로 감싸면 안됩니까? 귀하의 예에서 지금 당장 서있는 것처럼 뚱뚱한 화살표 뒤의 중괄호는 개체가 아닌 블록을 시작합니다. 이와 같은 것 :this.setState((state) => ({ list: state.list.push(newObj) }))

— kumarharsh

3

이 코드는 어떻게 작동합니까? 를 반환 푸시 방법 NUMBER온으로 설정되며, list가변

— kumarharsh

1

표시를 사용할 수도 있습니다.this.setState((state) => ({ list: [...state.list, newObj] }))

— amoebe

19

2016 업데이트

ES6에서는 다음을 사용할 수 있습니다.

this.setState({ list: [...this.state.list, ...newObject] });

— Ashish Chaudhary
소스

5

...[newObject]과 동일합니다 newObject.

— amoebe 2016-10-26

2

일괄 업데이트에는 작동하지 않습니다. 내 예는 stackoverflow.com/a/41445812/1998186 에서 참조하십시오 .

— NealeU

7

반응 문서 ( https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous )에서 :

this.props 및 this.state는 비동기 적으로 업데이트 될 수 있으므로 다음 상태를 계산하기 위해 해당 값에 의존해서는 안됩니다.

따라서 대신 이렇게해야합니다.

this.setState((prevState) => ({
  contacts: prevState.contacts.concat([contact])
}));

— jcgzzc
소스