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])
}));