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

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

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

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

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

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

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

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

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

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

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

반응 네이티브

u UI (예 : ur flatList)도 최신 상태로 유지하려면 PrevState를 사용합니다. 아래 예제에서 사용자가 버튼을 클릭하면 목록에 새 개체를 추가합니다 (모델과 UI 모두 )

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

다음과 같은 방법으로 객체를 확인하고 업데이트 할 수 있습니다.

this.setState(prevState => ({
    Chart: this.state.Chart.length !== 0 ? [...prevState.Chart,data[data.length - 1]] : data
}));

여기에서는 객체를 이와 같은 상태 배열로 푸시 할 수 없습니다. 일반 배열에서 당신의 방식대로 밀 수 있습니다. 여기서 상태를 설정해야합니다.

this.setState({ 
     myArray: [...this.state.myArray, 'new value'] 
})

이렇게 상태를 업데이트하려는 경우

   handleClick() {
        this.setState(
{myprop: this.state.myprop +1}
        })
    }

이 접근 방식을 고려하십시오

   handleClick() {
        this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        })
    }

기본적으로 prevState는 this.state를 작성합니다.