使用处理程序更新数组中的对象

Question

我有一个使用React.memo的功能性Item组件。该组件呈现几个不同的输入字段。我正在尝试更新已更改的Item的状态值，但我不确定如何在不更改或更改当前状态的情况下进行更新，因为我的原始实现导致React.memo的nextProps和prevProps相同。

这是我在父容器组件中的处理程序：

handleItemChange = (item, event, index) => {
item[event.target.name] = event.target.value;
this.setState({
job: this.state.job
})
}

我的状态看起来像这样：

this.state = {
job: {
items: [{id: 1, quantity: 3, name: "test"}, {id: 2, quantity: 1, name: "test 2"}, {id: 3, quantity: 1, name: "test 3"}]
}
} 

在我的表单组件中，我呈现了一个Items的列表，如下所示：

{this.props.job.items.map((i, index) => (
<Item key={i.id} handleItemChange={this.props.handleItemChange} item={i} index={index} />
))}

然后，在我的Item组件(已存储(中，我呈现输入字段并调用处理程序：

function areEqual(prevProps, nextProps) {
console.log(prevProps.job_item.quantity)
console.log(nextProps.job_item.quantity)
return true
};
const Item = React.memo(props => {
return (

<Grid container spacing={3}>
<Grid item xs={1}>
<FormControl>
<TextField
name="quantity"
value={props.item.quantity}
label="quantity"
variant="outlined"
type="number"
onChange={e => props.handleItemChange(props.item, e, props.index)}
InputLabelProps={{
shrink: true,
}}
/>
</FormControl>
</Grid>
</Grid>

)
}, areEqual);
export default Item;

使用当前的代码，areEqual中的两个道具对象都包含相同的值，我相信这是因为我在handleItemChange处理程序中直接更改item，但我不知道如何在不直接引用项值的情况下更改项值。我曾考虑过对数组对象进行深度复制，但我不确定如何做到这一点。我也在传递索引值，因此引用this.state.job.items[index]对于我的情况是可能的。

Answer 1

也许这行得通？

handleItemChange = (item, event, index) => {
// copy the state, since state should be immutable
let clonedJob = [...this.state.job];
// Find item in new state
let clonedItem = clonedJob.find(i => return i.id === item.id);
// Update that cloned item
clonedItem[event.target.name] = event.target.value;
// Update state
this.setState({
job: clonedJob
})
}