상태에서의 어레이에 값을 추가하는 가장 좋은 방법은 무엇입니까?

상태에서의 어레이에 값을 추가하는 가장 좋은 방법은 무엇입니까?

주(州)에 배열이 있습니다. 예를 들어, state.arr.이 상태 속성에 뭔가를 추가한 다음 몇 가지 속성을 더 변경합니다.

옵션 1

onChange(event){
    this.state.arr.push('newvalue');
    ...
    this.setState({some:'val',arr:this.state.arr})
}

옵션 2

onChange(event){
    var newArr = this.state.arr;
    ...
    newArr.push('newvalue');
    ...
    this.setState({some:'val',arr:newArr})
}

그래서.. 이 주는 불변의 대접을 받아야 한다는 걸 알아요단, 옵션1과 같이 사용해도 될까요?아니면 옵션2와 같이 사용해야 하나요?그래서 항상 먼저 메모리에 복사를 해야 하나요?

지금으로서는 이게 최선이에요.

this.setState(previousState => ({
    myArray: [...previousState.myArray, 'new value']
}));

제공한 두 가지 옵션이 모두 동일합니다.둘 다 메모리 내의 동일한 개체를 가리키고 동일한 배열 값을 가집니다.상태 오브젝트는 앞에서 설명한 대로 불변으로 취급해야 합니다.단, 배열을 다시 생성하여 새로운 오브젝트를 가리키도록 하고, 새로운 아이템을 설정한 후 상태를 리셋해야 합니다.예:

onChange(event){
    var newArray = this.state.arr.slice();    
    newArray.push("new value");   
    this.setState({arr:newArray})
}

콘캣을 사용하는 또 다른 간단한 방법:

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

ES6 구문을 사용하는 경우 스프레드 연산자를 사용하여 새 항목을 기존 배열에 하나의 라이너로 추가할 수 있습니다.

// Append an array
const newArr = [1,2,3,4]
this.setState(prevState => ({
  arr: [...prevState.arr, ...newArr]
}));

// Append a single item
this.setState(prevState => ({
  arr: [...prevState.arr, 'new item']
}));

로의 지름길useState후크:

const [value, setValue] = useState([])
setValue([...value, newvalue])

지금 최고야.

this.setState({ myArr: [...this.state.myArr, new_value] })

onChange() {
     const { arr } = this.state;
     let tempArr = [...arr];
     tempArr.push('newvalue');
     this.setState({
       arr: tempArr
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

후크가 있는 기능 컴포넌트용

const [searches, setSearches] = useState([]);

// Using .concat(), no wrapper function (not recommended)
setSearches(searches.concat(query));

// Using .concat(), wrapper function (recommended)
setSearches(searches => searches.concat(query));

// Spread operator, no wrapper function (not recommended)
setSearches([...searches, query]);

// Spread operator, wrapper function (recommended)
setSearches(searches => [...searches, query]);

출처 : https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

리액트 훅 - useState (2022)

const [array, setArray] = useState([]);

const handleChange = (newValue) => {
  setArray((array) => [...array, newValue]);
};

handleValueChange = (value) => {
      let myArr= [...this.state.myArr]
      myArr.push(value)
      this.setState({
         myArr
     })

이거면 될 것 같아.

사용 중인 어레이에 새 개체를 계속 추가하려면:

_methodName = (para1, para2) => {
  this.setState({
    arr: this.state.arr.concat({para1, para2})
  })
}

이는 질문에 직접 답변하지 못할 수 있지만 다음과 같은 상태로 제공되는 사용자를 위한 것입니다.

 state = {
    currentstate:[
     {
    id: 1 ,
    firstname: 'zinani',
    sex: 'male'

     }
    ]

 }

솔루션

const new_value = {
    id: 2 ,
    firstname: 'san',
    sex: 'male'

     }

현재 상태를 새 값으로 바꿉니다.

 this.setState({ currentState: [...this.state.currentState, new_array] })

const [array, setArray] = useState([]);

const handleChange = (newValue) => {
  setArray((prevState) => [...prevState, newValue]);
};

이전 상태를 사용하여 새 상태를 계산하면 함수를 setState에 전달할 수 있습니다.함수는 이전 값을 수신하고 업데이트된 값을 반환합니다.

setState 문서

언급URL : https://stackoverflow.com/questions/26505064/what-is-the-best-way-to-add-a-value-to-an-array-in-state