상태 배열로 푸시하는 올바른 방법

상태 배열로 푸시하는 올바른 방법

---

데이터를 상태 배열로 푸시하는 데 문제가있는 것 같습니다. 이 방법으로 달성하려고합니다.

this.setState({ myArray: this.state.myArray.push('new value') })

그러나 이것이 잘못된 방법이라고 생각하며 변경 가능성에 문제가 있습니까?

---

배열 푸시 반환 길이

this.state.myArray.push('new value')배열 자체 대신 확장 배열의 길이를 반환합니다. Array.prototype.push () .

반환 값이 배열이 될 것으로 예상합니다.

불변성

오히려 React의 동작 인 것 같습니다.

나중에 setState ()를 호출하면 만든 변형을 대체 할 수 있으므로 this.state를 직접 변형하지 마십시오. this.state를 변경 불가능한 것처럼 취급하십시오. React.Component .

나는 다음과 같이 할 것이라고 생각합니다 (React에 익숙하지 않음).

var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })

---

es6를 사용하면 다음과 같이 할 수 있습니다.

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

확산 구문

---

상태를 직접 변경하지 않는 것이 좋습니다.

이후 React 버전에서 권장되는 접근 방식은 경합 상태를 방지하기 위해 상태를 수정할 때 업데이트 기능을 사용하는 것입니다.

배열 끝에 문자열 푸시

this.setState(prevState => ({
  myArray: [...prevState.myArray, "new value"]
}))

배열의 시작 부분으로 문자열 푸시

this.setState(prevState => ({
  myArray: ["new value", ...prevState.myArray]
}))

객체를 배열 끝으로 푸시

this.setState(prevState => ({
  myArray: [...prevState.myArray, {"name": "object"}]
}))

객체를 배열의 시작 부분으로 푸시

this.setState(prevState => ({
  myArray: [ {"name": "object"}, ...prevState.myArray]
}))

---

.concat메서드를 사용하여 새 데이터로 배열 복사본을 만들 수 있습니다 .

this.setState({ myArray: this.state.myArray.concat('new value') })

그러나 특별한 행동을 조심 .concat- 배열을 전달할 때 방법 [1, 2].concat(['foo', 3], 'bar')에서 발생합니다 [1, 2, 'foo', 3, 'bar'].

---

상태를 전혀 운영해서는 안됩니다. 적어도 직접적으로는 아닙니다. 어레이를 업데이트하려면 이와 같은 작업을 수행해야합니다.

var newStateArray = this.state.myArray.slice();
newStateArray.push('new value');
this.setState(myArray: newStateArray);

상태 개체에서 직접 작업하는 것은 바람직하지 않습니다. React의 불변성 도우미를 살펴볼 수도 있습니다.

https://facebook.github.io/react/docs/update.html

---

이 코드는 저에게 효과적입니다.

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
  this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})

---

반응 네이티브

if u also want ur UI (ie. ur flatList) to be up to date, use PrevState: in the example below if user clicks on the button , it is going to add a new object to the list( both in the model and UI)

data: ['shopping','reading'] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}. 

참고URL : https://stackoverflow.com/questions/37435334/correct-way-to-push-into-state-array