如何更新数组中具有特定索引React State的对象元素

Question

下面的代码是我试图在状态中更新main_id和sub_id的内容。

我被卡住了。。。

const [state, setState] = useState({
ids: [
{
main_id: null,
sub_ids: []
}
]
});
//this is what I've tried..
const handleState = index => (v) => {
setState({...setState, ids: setState.ids.map((x,i)=>(
i === index ? {x.main_id: v.id, sub_ids: []})
))})
}

我在同一个组件上使用这个函数，这意味着它会添加不同对象的数组的特定索引。

<componentOne onChange ={handleState(k)}/>
<componentTwo onChange={handlestate(k)} />

在这之后我想要得到的状态，

state ={
ids:[
{
main_id: v.id,
sub_ids:[]
},
{
main_id: v.id,
sub_ids:[]
}
]
}

Answer 1

看起来您正试图在状态更新器函数(setState(中与当前状态对象(state(进行比较。

浅层复制现有状态，然后在索引匹配时也浅层复制元素。您还应该使用功能状态更新。

const handleState = index => v => {
setState(state => ({
...state, // <-- copy previous state
ids: state.ids.map((x, i) =>
i === index
? {
...x, // <-- on match, copy element, then update properties
main_id: v.id,
sub_ids: [],
}
: x, // <-- non-match, just pass element through
),
}));
};

简化状态可能会更清楚一些，因为它似乎覆盖了整个元素对象。

const [ids, setIds] = useState([
{
main_id: null,
sub_ids: []
}
]);
const handleState = index => v => {
setIds(ids => ids.map((x, i) =>
i === index
? {
main_id: v.id,
sub_ids: [],
}
: x,
),
}));
};