如何使用反应钩子设置状态数组答案

【问题标题】：how to set state array with react hooks如何使用反应钩子设置状态数组
【发布时间】：2020-03-19 21:04:38
【问题描述】：

提前致谢。刚接触 React hooks (REact Native)

我正在维护 2 个状态数组，其中 1 个是要显示的项目列表，另一个是用户从第一个数组中选择的列表。

const [myList, setMyList] = React.useState([
        {
            ID: 0,
            AddName: 'Zion 1'
        },
        {
            ID: 1,
            AddName: 'Zion 2',
        },
        {
            ID: 2,
            AddName: 'Zion 3',
        }
    ])

    const [userSelectedList, setUserSelectedList] = React.useState([])

如果用户选择了 1 个项目，它应该进入状态 userSelectedList 并且如果用户再次单击该项目应该从 userSelectedList 中删除，我如何拥有一个平面列表呈现 onclick 的功能。

我没有把我的代码放在这里，因为它太粗糙了。任何人都可以帮助我使用确切的登录名和语法。

const itemOnClick =(item) =>{
//logic --setState
}

状态突变在这里是个问题。

【问题讨论】：

标签： reactjs react-native react-hooks

【解决方案1】：

const [userSelectedList, setUserSelectedList] = React.useState(null)

const itemOnClick =(item) =>{
  item !== null ? setUserSelectedList(item) :setUserSelectedList(null)
}

但如果您使用的是选择元素，我更喜欢做出反应参考。

【讨论】：

【解决方案2】：

const [userSelectedList, setUserSelectedList] = React.useState([]);

const itemOnClick =(item) => {
   if (userSelectedList.length === 0) { 
      setUserSelectedList(item)
      return;
   }
   const arrId = myList.map(item => item.id);
   if(arrId.includes(item.id)) {
      const newArrUserSelected = userSelectedList.filter(val => val.id !== item.id)
      setUserSelectedList(newArrUserSelected)
   } else {
      setUserSelectedList([...userSelectedList, item])
   }
}

希望能帮到你！

【讨论】：