Question

我正在尝试生成多个复选框。我希望当您单击复选框时，check属性的值将更改为相反的值。通常可以这样：

check =! check

但是我正在使用hooks

const [data,setData]=data;

，我不知道如何更新此项目而不影响对象的其余部分。我该怎么办？

这是我的数据，还有我的hooks定义：

        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>)

如何通过修改元素来更新钩子中定义的整个对象，以便再次呈现代码？

Answer 1

我建议您使自己成为可以更新各个键的复合状态钩子。它的行为类似于React类组件中的setState方法。

查看此内容以供参考：this

如果仅是一种交互程度，您可以从状态中复制该密钥，编辑副本，然后使用它来更新状态：

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);
  }
}

上面的代码应在您的状态下更新trucker键。

如何使用useState（）更新单个数组值？

1 个答案: