Reactjs 如何使用useState()更新单个数组值?
我正在尝试生成几个复选框。我希望当您单击复选框时,Reactjs 如何使用useState()更新单个数组值?,reactjs,react-native,Reactjs,React Native,我正在尝试生成几个复选框。我希望当您单击复选框时,check属性的值会更改为相反的值。这通常通过以下方式完成: check =! check 但是我用的是钩子 const [data,setData]=data; 我不知道如何在不影响对象其余部分的情况下更新此项。我怎么做 这是我的数据和我的挂钩定义: let data={ "documents": { "trucker": { "checkDoc
check
属性的值会更改为相反的值。这通常通过以下方式完成:
check =! check
但是我用的是钩子
const [data,setData]=data;
我不知道如何在不影响对象其余部分的情况下更新此项。我怎么做
这是我的数据和我的挂钩定义:
let data={
"documents": {
"trucker": {
"checkDocuments": [
{
'label': 'licencia',
'check': false
},
{
'label': 'identificacion',
'check': false
},
{
'label': 'telefono',
'check': false
},
],
"section": "camionero"
},
"client": {
"checkDocuments": [
{
'label': 'comodato',
'check': false
}
],
"section": "cliente"
},
"container": {
"checkDocuments": [
{
'label': 'BL',
'check': false
}
],
"section": "contenedor"
}
}
}
const [data,setData]=data;
这是渲染中的代码
return (
<List>
{
Object.keys(data).map((section, i) => {
return
<ListItem itemHeader first key={i}>
<Text>{data[section].section}</Text>
</ListItem>
data[section].checkDocuments.map((document, j) => {
return
<ListItem onPress={() => document.check = !document.check} key={j} > ***I need set only update this element in my data
<CheckBox checked={document.check} onPress={() => document.check = !document.check; } color="blue" /> ****I need set only update this element in my data
<Body>
<Text>{document.label}</Text>
</Body>
</ListItem>
})
})
}
</List>)
返回(
{
Object.keys(data.map)((部分,i)=>{
返回
{data[section]。section}
数据[部分].checkDocuments.map((文档,j)=>{
返回
document.check=!document.check}key={j}>***我只需要设置更新数据中的此元素
document.check=!document.check;}color=“蓝色”/>****我只需要设置更新数据中的此元素
{document.label}
})
})
}
)
如何通过修改元素来更新钩子中定义的整个对象,以便再次呈现代码?我建议您创建一个可以更新单个键的复合状态钩子。它的行为类似于React类组件中的setState
方法
请查看以下内容以供参考:
如果一个级别的交互还不够,您可以从您的状态复制该密钥,编辑副本,然后使用它更新您的状态:
const { state, setState } = useCompound(initialState);
const updateTrucker = (type, updates) => {
if (type === 'documents') {
const { trucker: truckerOriginal } = state;
// copy it to prevent mutations
const trucker = { ...truckerOriginal };
trucker.checkDocuments = trucker.checkDocuments.map(
doc => { /* your document check update logic here */ }
);
setState(trucker);
}
}
上述代码应更新您所在州的卡车司机
密钥