(React Native - Expo) 最后选择的对象没有添加到钩子数组中答案

【问题标题】：(React Native - Expo) The last seleted object is not added to hook array(React Native - Expo) 最后选择的对象没有添加到钩子数组中
【发布时间】：2021-11-10 15:05:25
【问题描述】：

当我尝试将对象添加到组件内的挂钩时，它工作正常 - 有点。似乎无论我做什么来更新整个选定项目数组的钩子。它总是缺少最后选择的对象。移除对象时也是如此。

假设我选择了项目 1、2、5 - 那么钩子丢失了 5 假设我选择了 1、2、4、5，然后取消选择 2，然后钩子获得了所有选择但没有取消选择项目 2。

这是我的代码..

const [selected, setSelected] = React.useState<string[]>()

React.useEffect(() => {
    const getBrands = async () => {
       const user = await getUser()
       setSelected(user?.brands)
    }
    getBrands()
}
, [])

const toggleSelection = async(item: string) => {
    console.log("clicked: ", item)
        if (selected === undefined){
            setSelected([item])
        }
        if (selected?.includes(item)) {
            setSelected(selected.filter((i) => i !== item))
        } else {
            setSelected([...selected, item])
           
        }
        await updateUser({brands: selected})
 }

这是控制台输出：

 clicked:  2
    Updating with  Object {
    "brands": Array [
      "1",
      "3",
      "5",
    ],
    }
clicked:  4
Updating with  Object {
  "brands": Array [
    "1",
    "3",
    "5",
    "2",
  ],

【问题讨论】：

标签： typescript react-native react-hooks expo

【解决方案1】：

我相信这个问题是重复的，请检查这个link

我希望这个解决方法对你有用：

...  
const toggleSelection = (item: string) => {
    console.log("clicked: ", item)
        if (selected === undefined){
            setSelected([item])
        }
        if (selected?.includes(item)) {
            setSelected(selected.filter((i) => i !== item))
        } else {
            setSelected([...selected, item])
           
        }
 }

 useEffect(() => {
   // 'selected' will be updated here
    async function asyncCall() {
     if(selected.length>0)
     await updateUser({brands: selected})
    }
   asyncCall();
  }
 , [selected])

【讨论】：