react native-如何在元组数组中使用react钩子

Question

我正在尝试制作FlatList，它从const中读取数据"值"；并呈现复选框的列表。对于复选框，我使用checkbox.Android来自react native paper。

Const"；值"；包含以下数据：

const values = [
{
name: 'Checkbox 1',
[check, setCheck]: React.useState(false),      
},
{
name: 'Checkbox 2',
[check, setCheck]: React.useState(false), 
},
];

React Hook在我使用const [check, setCheck] = React.useState(false);时起作用，但如何将其放置在"；值"；？

我收到错误：

Unexpected token, expected "]" 
123 |     {
124 |       name: 'Checkbox 1',
> 125 |       [check, setCheck]: React.useState(false),
|                 ^
126 |     },
127 |     {]

对不起，我是新手，找不到像这个案例这样复杂的例子。或者这不可能https://reactjs.org/docs/hooks-rules.html:

不要在循环、条件或嵌套函数中调用Hook

Answer 1

根据钩子规则，这是不可能的。但你可以这样做。

//your checkbox state
const [checkbox,setcheckbox] = useState([
{
name: 'Checkbox 1',
checked:false,      
},
{
name: 'Checkbox 2',
checked:false, 
},
]);

然后循环数据或使用平面

<Flatlist
data={checkbox}
renderItem={({item,index})=>{
return (
<Pressable onPress={()=>{
let newcheckbox = checkbox;
newcheckbox[index].checked = !checkbox[index].checked;
setcheckbox(newcheckbox)
}}>
<Text style={{color:item?.checked ? 'green':'red'}}>
{`${item?.checked ? 'Checked':'UnCheked'} (click me to change)`}
<Text/>
</Pressable>
);
}}
/>