如何解决如何使用特定索引,React State更新数组中的对象元素
下面的代码是我要在状态下更新main_id和sub_ids的内容。
我从这里被困住了...
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:[]
}
]
}
解决方法
好像您正在尝试在状态更新程序功能(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,),}));
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。