P粉7983434152023-08-24 12:39:53
You can achieve this by using the update
immutability helper : p>
this.setState({ items: update(this.state.items, {1: {name: {$set: 'updated field name'}}}) })
Alternatively, if you don't care about being able to detect changes to this using ===
in the shouldComponentUpdate()
lifecycle method, you can edit the state directly and force the component to re- Rendering - This is actually the same as @limelights' answer in that it pulls the object out of state and edits it.
this.state.items[1].name = 'updated field name' this.forceUpdate()
Later editing added:
Check out the lessons in Simple Component Communication react-training for an example of how to pass a callback function from a parent component that holds state to a child component that needs to trigger a state change.
P粉7093078652023-08-24 12:38:33
Here's how to do it without the helper library:
handleChange: function (e) { // 1. Make a shallow copy of the items let items = [...this.state.items]; // 2. Make a shallow copy of the item you want to mutate let item = {...items[1]}; // 3. Replace the property you're intested in item.name = 'newName'; // 4. Put it back into our array. N.B. we *are* mutating the array here, // but that's why we made a copy first items[1] = item; // 5. Set the state to our new copy this.setState({items}); },
If desired, you can combine steps 2 and 3:
let item = { ...items[1], name: 'newName' }
Or you can do the whole thing in one line:
this.setState(({items}) => ({ items: [ ...items.slice(0,1), { ...items[1], name: 'newName', }, ...items.slice(2) ] }));
Note: I created items
as an array. OP used an object. However, the concept is the same.
You can see what's happening in the terminal/console:
❯ node > items = [{name:'foo'},{name:'bar'},{name:'baz'}] [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] > clone = [...items] [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] > item1 = {...clone[1]} { name: 'bar' } > item1.name = 'bacon' 'bacon' > clone[1] = item1 { name: 'bacon' } > clone [ { name: 'foo' }, { name: 'bacon' }, { name: 'baz' } ] > items [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] // good! we didn't mutate `items` > items === clone false // these are different objects > items[0] === clone[0] true // we don't need to clone items 0 and 2 because we're not mutating them (efficiency gains!) > items[1] === clone[1] false // this guy we copied