Question

先谢谢了。是一个新的反应钩子（REact Native）

我维护2个状态数组，其中1个要显示的项目列表，另一个是用户从第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([])

我如何拥有一个用于功能表呈现onclick的功能，如果用户选择了1个项目，它将进入userSelectedList状态，如果用户再次单击，则应将项目从userSelectedList中移除。

我不是在这里保留我的代码，因为它是如此的粗鲁。任何人都可以帮我了解确切的登录名和语法。

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

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

Answer 1

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

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

但是如果您使用的是select元素，则我更愿意作为react引用。

Answer 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])
   }
}

希望能帮助您！

如何使用react hooks设置状态数组

2 个答案: