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

Program / 글쓴이

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

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

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

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

답변

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

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

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

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

  this.setState(newState);

답변

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

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

또는 ES5 :

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

답변

2016 업데이트

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

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

답변

반응 문서 ( 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])
}));

답변