react native - 如何在元组数组中使用 React Hooks？

Question

我正在尝试制作 FlatList，它从常量“值”读取数据并呈现复选框列表。对于复选框，我使用来自 react-native-paper 的 Checkbox.Android。

常量“值”包含以下数据：

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:

Don’t call Hooks inside loops, conditions, or nested functions

Answer 1

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

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

然后循环数据或者使用flatlist

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

/>

react native - 如何在元组数组中使用 React Hooks？

react native - How to use React Hooks in array of tuples?

arrays

tuples

reactjs

react-native

react-hooks