javascript - Updating Boolean Value in React State Array - Stack Overflow

admin管理员组

文章数量:1388877

Goal :

Within a React App, understand how to correctly update a boolean value that is stored within an array in state.

Question :

I am not sure if my code is correct in order to avoid asynchronous errors (whether or not it works in this case I am not interested in as my goal is to understand how to avoid those errors in all cases). Is there some syntax that is missing in order to correctly create a new state?

Context :

1. Creating a todo list within React.
2. My state consists of an array labeled itemsArr with each array element being an object
3. The objects initialize with the following format :
   • { plete : false, item : "user entered string", id : uuid(), }
4. Upon clicking a line item, I am calling a function handleComplete in order to strikethrough the text of that line by toggling plete : false/true
5. The function is updating state via this :

    handleComplete(id){
      this.setState(state => 
        state.itemsArr.map(obj => obj.id === id ? objplete = !objplete : '')
      )
    }

Additional Details :

One of my attempts (does not work) :

    handleComplete(id){
      const newItemsArr = this.state.itemsArr.map(obj => 
         obj.id === id ? objplete = !objplete : obj);
      this.setState({ itemsArr : newItemsArr })
    }

Goal :

Within a React App, understand how to correctly update a boolean value that is stored within an array in state.

Question :

I am not sure if my code is correct in order to avoid asynchronous errors (whether or not it works in this case I am not interested in as my goal is to understand how to avoid those errors in all cases). Is there some syntax that is missing in order to correctly create a new state?

Context :

1. Creating a todo list within React.
2. My state consists of an array labeled itemsArr with each array element being an object
3. The objects initialize with the following format :
   • { plete : false, item : "user entered string", id : uuid(), }
4. Upon clicking a line item, I am calling a function handleComplete in order to strikethrough the text of that line by toggling plete : false/true
5. The function is updating state via this :

    handleComplete(id){
      this.setState(state => 
        state.itemsArr.map(obj => obj.id === id ? obj.plete = !obj.plete : '')
      )
    }

Additional Details :

One of my attempts (does not work) :

    handleComplete(id){
      const newItemsArr = this.state.itemsArr.map(obj => 
         obj.id === id ? obj.plete = !obj.plete : obj);
      this.setState({ itemsArr : newItemsArr })
    }

• javascript
• reactjs
• asynchronous

Share Improve this question Follow asked Jan 2, 2020 at 20:54 KamiFightingSpiritKamiFightingSpirit 5511 silver badge77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

In both snippets you haven't correctly returned a new object from the .map callback:

 handleComplete(id){
  const newItemsArr = this.state.itemsArr.map(obj => 
     obj.id === id ? { id: obj.id, plete: !obj.plete } : obj);
  this.setState({ itemsArr : newItemsArr });
}

Your function, as mentioned above, returns and updates wrong data, by adding new elements in your state instead of updating your current array.

Since array.map() returns an array, you can assign it to the state array, itemsArr.

You should also replace the change condition by updating the element's value first, and then returning it, if its id matches,or else, simply leave it as is.

handleComplete=(id)=>{
      this.setState(state =>{
        itemsArr:state.itemsArr.map(obj => obj.id === id 
                                 ? (obj.plete = !obj.plete,obj) //update element's plete status and then return it
                                 : obj) //return element as is
      },()=>console.log(this.state.itemsArr)) //check new state
    }

live example using your data : https://codepen.io/Kalovelo/pen/KKwyMGe

Hope it helps!

state = {
    itemsArr: [
        {
            plete: false,
            item: 'iemName',
            id: 1
        },
        {
            plete: false,
            item: 'iemName',
            id: 2
        }
    ]
}

handleComplete = (id) => {
   let { itemsArr } = { ...this.state };
   itemIndex = itemsArr.findIndex(item => id === item.id);
   itemsArr[itemIndex]['plete'] = !itemsArr[itemIndex]['plete'];
   this.setState{itemsArr}
}

本文标签： javascriptUpdating Boolean Value in React State ArrayStack Overflow