상태 배열에서 항목을 삭제하는 방법

상태 배열에서 항목을 삭제하는 방법

밥, 샐리, 잭을 상자에 넣을 수 있을 거야박스에서 꺼낼 수도 있어요.떼어내면, 슬롯이 남지 않는다.

people = ["Bob", "Sally", "Jack"]

이제 "Bob"을 제거해야 합니다.새로운 어레이는 다음과 같습니다.

["Sally", "Jack"]

내 반응 컴포넌트는 다음과 같습니다.

...

getInitialState: function() {
  return{
    people: [],
  }
},

selectPeople(e){
  this.setState({people: this.state.people.concat([e.target.value])})
},

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
},

...

여기에서는 (onClick 등) 더 많은 코드가 있으므로 최소한의 코드를 보여 줍니다.에서 "Bob을 삭제, 파기하는 이지만 "Bob"은 삭제, 삭제, 파기됩니다.removePeople()가 호출되었을 때 동작하지 않습니다.좋은 생각 있어요?이거 보고 있었는데 리액트를 쓰니까 뭔가 잘못했나 봐요.

리액트(React). 「」)의 Array(이것도 오브젝트입니다)가 변경되면 새로운 복사본을 작성해야 합니다.

다른 은 '쓰다'를 도 있습니다.Array.prototype.splice() 이 , 이, 이 , , , , , , , , , , , , , , , , , , , ,는 사용하지 것이 splice()리액트와 함께.

하기 쉬운 사용법Array.prototype.filter()배열을 하려면: "배열":

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) { 
        return person !== e.target.value 
    })});
}

요소를 배열에서 제거하려면 다음 작업을 수행합니다.

array.splice(index, 1);

고객님의 경우:

removePeople(e) {
  var array = [...this.state.people]; // make a separate copy of the array
  var index = array.indexOf(e.target.value)
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({people: array});
  }
},

다음은 ES6를 사용한 알렉산드르 페트로프의 응답에 대한 약간의 변형입니다.

removePeople(e) {
    let filteredArray = this.state.people.filter(item => item !== e.target.value)
    this.setState({people: filteredArray});
}

solution using using를 사용한 slice 시키지 않고

const [items, setItems] = useState(data);
const removeItem = (index) => {
  setItems([
             ...items.slice(0, index),
             ...items.slice(index + 1)
           ]);
}

.splice이치노「」를 사용합니다.delete 인덱스의 되지 않습니다.undefined

splice() 메서드는 기존 요소를 삭제하거나 새 요소를 추가함으로써 배열 내용을 변경합니다.

구문: array.splice(start, deleteCount[, item1[, item2[, ...]]])

var people = ["Bob", "Sally", "Jack"]
var toRemove = 'Bob';
var index = people.indexOf(toRemove);
if (index > -1) { //Make sure item is present in the array, without if condition, -n indexes will be considered from the end of the array.
  people.splice(index, 1);
}
console.log(people);

편집:

저스틴 그랜트가 지적한 것처럼, 경험으로 볼 때, 절대 돌연변이를 하지 않는다.this.state 「」, 「」를 발신하는 setState()나중에 당신이 만든 돌연변이를 대체할 수 있습니다.this.state마치 불변의 존재인 것처럼요.

다른 방법으로는 에 오브젝트 복사본을 만듭니다.this.state하고, 를 원래대로 .setState()Array#map,Array#filter사용할 수 있습니다.

this.setState({people: this.state.people.filter(item => item !== e.target.value);});

반응 상태의 어레이에서 항목을 쉽게 삭제하는 방법:

삭제된 ID를 이 함수에 전달하고 이 함수는 목록에서 삭제된 ID를 삭제합니다.

export default class PostList extends Component {
  this.state = {
      postList: [
        {
          id: 1,
          name: 'All Items',
        }, {
          id: 2,
          name: 'In Stock Items',
        }
      ],
    }


    remove_post_on_list = (deletePostId) => {
        this.setState({
          postList: this.state.postList.filter(item => item.post_id != deletePostId)
        })
      }
  
}

filtermethod는 상태를 건드리지 않고 어레이를 수정하는 가장 좋은 방법입니다.

조건에 따라 새 배열을 반환합니다.

는, 합니다.person.id !== id조건에 따라 항목을 제외한 새 배열을 만듭니다.

const [people, setPeople] = useState(data);

const handleRemove = (id) => {
   const newPeople = people.filter((person) => person.id !== id);

   setPeople( newPeople);
 };

<button onClick={() => handleRemove(id)}>Remove</button>

권장 안 함:그러나 ID가 없는 경우 조건에 항목 색인을 사용할 수도 있습니다.

index !== itemIndex

일부 답변은 'splice'를 사용하여 언급되었으며, 이는 Chance Smith가 말한 대로 어레이를 변환했습니다.Method call 'slice'('slice'에 대한 문서는 여기에 있음)를 사용하여 원래 어레이를 복사할 것을 권장합니다.

현재 상태 변수는 다음과 같습니다.

const [animals, setAnimals] = useState(["dogs", "cats", ...])

이 함수를 호출하여 제거할 항목을 전달합니다.

removeItem("dogs")

const removeItem = (item) => {
    setAnimals((prevState) =>
      prevState.filter((prevItem) => prevItem !== item)
    );
  };

상태 변수는 다음과 같습니다.

["cats", ...]

또 다른 방법은useState훅. https://reactjs.org/docs/hooks-reference.html#functional-updates 문서를 확인합니다.이 문서에는 다음과 같이 기재되어 있습니다.클래스 컴포넌트에 있는 setState 메서드와 달리 useState는 업데이트개체를 자동으로 Marge하지 않습니다.이 동작은 함수 업데이터 폼과 오브젝트 확산 구문을 조합하여 복제할 수 있습니다.또는 을 사용합니다.useReducer갈고리를 채우다

const [state, setState] = useState({});
setState(prevState => {
  return {...prevState, ...updatedValues};
});

const [people, setPeople] = useState(data);

const handleRemove = (id) => {
   const newPeople = people.filter((person) => { person.id !== id;
     setPeople( newPeople );
     
   });
 };

<button onClick={() => handleRemove(id)}>Remove</button>

삭제된 항목을 필터링하고 나머지 항목으로 상태를 다시 업데이트하십시오.

let remainingItems = allItems.filter((item) => {return item.id !== item_id});
    
setItems(remainingItems);

매우 심플한 첫 번째 가치 정의

state = {
  checked_Array: []
}

지금이다,

fun(index) {
  var checked = this.state.checked_Array;
  var values = checked.indexOf(index)
  checked.splice(values, 1);
  this.setState({checked_Array: checked});
  console.log(this.state.checked_Array)
}

removePeople(e){
    var array = this.state.people;
    var index = array.indexOf(e.target.value); // Let's say it's Bob.
    array.splice(index,1);
}

상세한 것에 대하여는, 문서를 참조해 주세요.

이 답변의 대부분은 클래스 컴포넌트용인 것 같습니다.기능 컴포넌트에서는 이 코드를 사용할 수 있습니다.

const [arr,setArr]=useState([]);
const removeElement=(id)=>{
    var index = arr.indexOf(id)
    if(index!==-1){
      setArr(oldArray=>oldArray.splice(index, 1));
    }
}

사용하는 것을 잊으셨습니다.setState. 예:

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
  this.setState({
    people: array
  })
},

하지만 사용하는 것이 좋다.filter어레이를 변환하지 않기 때문입니다.예:

removePeople(e){
  var array = this.state.people.filter(function(item) {
    return item !== e.target.value
  });
  this.setState({
    people: array
  })
},

const [randomNumbers, setRandomNumbers] = useState([111,432,321]);
const numberToBeDeleted = 432;

// Filter (preferred)
let newRandomNumbers = randomNumbers.filter(number => number !== numberToBeDeleted)
setRandomNumbers(newRandomNumbers);

//Splice (alternative)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let newRandomNumbers = Array.from(randomNumbers);
newRandomNumbers.splice(indexOfNumberToBeDeleted, 1);
setRandomNumbers(newRandomNumbers);


//Slice (not preferred - code complexity)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let deletedNumber = randomNumbers.slice(indexOfNumberToBeDeleted, indexOfNumberToBeDeleted+1);
let newRandomNumbers = [];
for(let number of randomNumbers) {
    if(deletedNumber[0] !== number)
        newRandomNumbers.push(number);
};
setRandomNumbers(newRandomNumbers);

언급URL : https://stackoverflow.com/questions/36326612/how-to-delete-an-item-from-state-array