javascript - How to setState to update an array in React? - Stack Overflow

admin管理员组

文章数量:1405586

I need to update an array in the state of my ponent in React. I've seens several topic with this question, but so far all of them are adding new items to the array with the spread operator, but I need to add OR remove items on a callback like this:

  handleCheck (newStatus, isChecked) {
    this.setState({ filterStatus: [...this.state.filterStatus, newStatus] })
  }

But the problem here is that it didn't work for status where the isChecked boolean es false to remove them from the array

What is the best way to add or remove items from that array, hopefully with spread operator?

Thanks

I need to update an array in the state of my ponent in React. I've seens several topic with this question, but so far all of them are adding new items to the array with the spread operator, but I need to add OR remove items on a callback like this:

  handleCheck (newStatus, isChecked) {
    this.setState({ filterStatus: [...this.state.filterStatus, newStatus] })
  }

But the problem here is that it didn't work for status where the isChecked boolean es false to remove them from the array

What is the best way to add or remove items from that array, hopefully with spread operator?

Thanks

• javascript
• arrays
• reactjs
• ecmascript-6

Share Improve this question Follow asked Jun 8, 2018 at 15:04 Leonardo UribeLeonardo Uribe 12311 silver badge1313 bronze badges 5

• to acess the previous state pass an function to this.setState that returns the new state, something like: this.setState(prevState => ({ filterStatus: [...prevState.filterStatus, newStatus] })). Try it, maybe it solves your problem. – Gabriel Carneiro Commented Jun 8, 2018 at 15:09
• I am not sure if your question is clear. When isChecked is true, you need to remove the "newStatus" from the array? or you need to return an array with only the newStatus? – Murilo Cruz Commented Jun 8, 2018 at 15:11
• 2 I need to update the array by adding OR removing the newStatus depending on the isChecked boolean value. If it's true then adding iot, if it's false, remove it – Leonardo Uribe Commented Jun 8, 2018 at 15:13
• array of what man? I think you problem is not in the array but in the ments, remember the objects are passed by reference, you need to remove em, probably normalize your data would be better? but it is something like a array of number, just make a new copy of the array and put in on the state – andresmijares Commented Jun 8, 2018 at 15:14
• an array of strings... for example: ['seven', 'four', 'six'] – Leonardo Uribe Commented Jun 8, 2018 at 15:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

try to use the .filter to remove the element. Remember to duplicate the array (using [...array] syntax) before using .filter, to don't change the original array:

handleCheck (newStatus, isChecked) {
    let newArray = isChecked? // if isChecked is true
        [...this.state.filterStatus, newStatus] : // add element
        [...this.state.filterStatus].filter(e => e !== newStatus); // remove the elements that are equal to newStatus
    this.setState({ filterStatus: newArray})
}

Think it functionnal !

const prevArray = this.state.array;
const itemsToAdd = [item, item, item];

//this function map the prev array escaping elements to remove 
//and then push itemsToAdd to the new array
const updateArray = ( i = [0], newArray = [] ) => 
  i < prevArray ? 
    yourRemovingCondition(prevArray[i]) ? 
      updateArray( i + 1, newArray ) 
    : updateArray( i + 1, [...newArray, prevArray[i])
  : [...newArray, ...itemsToAdd]
;

setState({array: updateArray()];

Put the check, add the element only when the bool isChecked is true, otherwise use filter to remove the element from the array.

Like this:

handleCheck (newStatus, isChecked) {
    this.setState(prevState => { 
        let filterStatus;
        if (isChecked) {
            filterStatus = [...prevState.filterStatus, newStatus];
        } else {
            filterStatus = prevState.filterStatus.filter(el => el.id !== newStatus.id)
        }
        return { filterStatus }
    })
}

Note: In place of id in filter callback method use the correct unique property name.

本文标签： javascriptHow to setState to update an array in ReactStack Overflow