Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 如何使用useState()更新单个数组值?_Reactjs_React Native - Fatal编程技术网

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);
  }
}
上述代码应更新您所在州的
卡车司机
密钥