구성 요소 상태의 어레이에서 요소를 제거하는 중

구성 요소 상태의 어레이에서 요소를 제거하는 중

컴포넌트 상태의 어레이에서 요소를 삭제하는 최선의 방법을 찾고 있습니다.'이것'은 것이 때문에this.state직접 변수를 사용하여 배열에서 요소를 삭제하는 더 좋은 방법(좀 더 간결한 방법)이 있습니까?

  onRemovePerson: function(index) {
    this.setState(prevState => { // pass callback in setState to avoid race condition
      let newData = prevState.data.slice() //copy array from prevState
      newData.splice(index, 1) // remove element
      return {data: newData} // update state
    })
  },

감사해요.

갱신했다

이것은 setState에서 콜백을 사용하도록 갱신되었습니다.이 작업은 업데이트 중에 현재 상태를 참조할 때 수행해야 합니다.

것 중 은 '이렇게'입니다.filter:

removeItem(index) {
  this.setState({
    data: this.state.data.filter((_, i) => i !== index)
  });
}

의 불변 도우미를 사용할 수 있습니다.후드에서 같은 작업을 효과적으로 수행할 수 있지만, 현재 작업 중인 작업은 문제가 없습니다.

this.setState(prevState => ({
  data: update(prevState.data, {$splice: [[index, 1]]})
}))

는 ★★★★★★★★★★★★★★★★★★★★★★★★★this.state의 of의 setState()는 권장되지 않습니다(상태 갱신은 비동기일 수 있습니다).

사이에서는 을 사용하라고 있습니다.setState()콜백 함수를 사용하여 업데이트 발생 시 prevState가 실행 시 전달되도록 합니다.그럼 이렇게 보이는군요.

Array.protype을 사용합니다.ES6를 사용하지 않는 필터

removeItem : function(index) {
  this.setState(function(prevState){
    return { data : prevState.data.filter(function(val, i) {
      return i !== index;
    })};
  });
}

Array.protype을 사용합니다.ES6 화살표 기능이 있는 필터

removeItem(index) {
  this.setState((prevState) => ({
    data: prevState.data.filter((_, i) => i !== index)
  }));
}

불변성 사용 지원

import update from 'immutability-helper'
...
removeItem(index) {
  this.setState((prevState) => ({
    data: update(prevState.data, {$splice: [[index, 1]]})
  }))
}

스프레드 사용

function removeItem(index) {
  this.setState((prevState) => ({
    data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
  }))
}

인스턴스에서는 " " "가 사용됩니다.this.setState()오래된 오브젝트 참조가 아닌 콜백이 전달됩니다.this.state;

다음은 ES6 확산 구문을 사용하여 해당 상태의 배열에서 요소를 제거하는 방법입니다.

onRemovePerson: (index) => {
  const data = this.state.data;
  this.setState({ 
    data: [...data.slice(0,index), ...data.slice(index+1)]
  });
}

이 문제는 @pscl에 의해 이미 정답이 나왔지만, 혹시 저와 같은 문제에 부딪힐 경우를 대비해서 여기에 끼어들고 싶습니다.4가지 방법 중 es6 구문은 일관성과 외부 라이브러리에 대한 의존도가 낮기 때문에 화살표 함수와 함께 사용하기로 선택하였습니다.

Array.protype을 사용합니다.ES6 화살표 기능이 있는 필터

removeItem(index) {
  this.setState((prevState) => ({
    data: prevState.data.filter((_, i) => i != index)
  }));
}

지수의했습니다.!==로로 합니다.!= 경우 의 경우 문자열 필드에서 인덱스를 취득하고 있었기 때문입니다.

클라이언트측에서 요소를 삭제할 때 이상한 동작이 발생하는 경우에도 어레이 인덱스를 요소의 키로 사용하지 않는 것이 도움이 됩니다.

// bad
{content.map((content, index) =>
  <p key={index}>{content.Content}</p>
)}

React가 변경 시 가상 DOM과 다른 경우 키를 확인하여 변경된 내용을 확인합니다.따라서 인덱스를 사용하는 경우 배열에 하나 적은 인덱스가 있으면 마지막 인덱스가 제거됩니다.대신 이렇게 콘텐츠의 ID를 키로 사용합니다.

// good
{content.map(content =>
  <p key={content.id}>{content.Content}</p>
)}

상기 답변은 관련 포스트에서 발췌한 것입니다.

해피 코딩 여러분!

위의 eprion 응답에 대한 코멘트에서 설명한 바와 같이 filter()는 이미 결정된 인덱스를 찾기 위해 루프하기 때문에 특히 큰 배열에서는 속도가 느려질 수 있습니다.이것은 깔끔하지만 비효율적인 솔루션입니다.

대안으로 단순히 원하는 요소를 '슬라이스'하여 조각들을 연결할 수 있습니다.

var dummyArray = [];    
this.setState({data: dummyArray.concat(this.state.data.slice(0, index), this.state.data.slice(index))})

이게 도움이 됐으면 좋겠네요!

요소를 제거하려는 경우 이 기능을 사용할 수 있습니다(인덱스 없음).

removeItem(item) {
  this.setState(prevState => {
    data: prevState.data.filter(i => i !== item)
  });
}

1 회선 도우미 기능을 사용하면, 코드의 판독성을 높일 수 있습니다.

const removeElement = (arr, i) => [...arr.slice(0, i), ...arr.slice(i+1)];

이렇게 사용하세요.

this.setState(state => ({ places: removeElement(state.places, index) }));

그냥 제안일 뿐이지, 네 코드에let newData = prevState.dataES6에서 도입된 스프레드를 사용할 수 있습니다.let newData = ...prevState.data 어레이 복사용

점 세 개...산포 연산자 또는 정지 모수를 나타냅니다.

함수 호출에 대한 인수 또는 배열 요소에 대한 인수를 0개 이상 예상하는 곳에서 배열 식이나 문자열 또는 반복할 수 있는 모든 항목을 확장할 수 있습니다.

또한 다음과 같은 항목을 배열에서 삭제할 수 있습니다.

onRemovePerson: function(index) {
  this.setState((prevState) => ({
    data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
  }))
}

이것이 도움이 되길 바랍니다!!

반응하여setState

const [array, setArray] = useState<any>([]);
//element you want to remove
let temp = array.filter((val: number) => {
    return val !== element;
 });
setArray(temp);

간단한 방법은 다음과 같습니다.

removeFunction(key){
  const data = {...this.state.data}; //Duplicate state.
  delete data[key];                  //remove Item form stateCopy.
  this.setState({data});             //Set state as the modify one.
}

도움이 되길 바랍니다!!!

레퍼런스URL : https://stackoverflow.com/questions/29527385/removing-element-from-array-in-component-state