React native / Flatlist with Switches：它们会立即切换回来

Question

我是 React 的新手，尝试做一些（我认为）简单的事情，一个带有开关的参数列表。

但是当我切换它们时，它们会立即切换回原始显示。我看了一些相关的帖子，但无法解决问题。

我也尝试将 Switch 值置于状态中，但随后出现“只能在函数组件的主体内部调用挂钩”错误。

这是代码：

    const UserPlantsPrefs = ({userPlantsPrefs}) => {
    
        const [prefs, setPrefs] = useState([
            {
                "plant": "plant one",
                "hasPref": true
            },
            {
                "plant": "plant two",
                "hasPref": true
            }
        ]);
    
        function toggleSwitch(value, index) {
            setPrefs((prevPrefs) => {
                prevPrefs[index].hasPref = value;
                return prevPrefs;
            })
        }
    
        function PrefItem({item, index}) {
            return (
                <View>
                    <Text>{item.plant}</Text>
                    <Switch
                        onValueChange={(value) => {
                            toggleSwitch(value, index);
                        }}
                        value={item.hasPref}
                    />
                </View>
            )
        }
    
        return (
            <View style={{backgroundColor: "white"}}>
                <FlatList data={prefs} renderItem={PrefItem}/>
            </View>
        )
    }
    
    export default UserPlantsPrefs;

Answer 1

您在 toggleSwitch 中对 setPrefs 的调用 returns 相同的对象是在修改后给出的 in-place.

如果 setState 调用的结果 == 等于它之前的值，React 不会 re-render，所以为了引起 re-render，你需要创建一个 new 对象。

下面是创建具有所需值的 new 对象的一种方法：

setPrefs((prevPrefs) => {
  return {
    ...prevPrefs,
    [index]: {
      ...prevPrefs[index],
      hasPref: value
    }
  }
})

（此代码段使用 spread syntax and computed-property initialisers，您可能需要查找 - 或者您可以使用 shallow-cloning 对象的任何其他方式来创建新对象）

React native / Flatlist with Switches：它们会立即切换回来

React native / Flatlist with Switches : they switch back immediately

reactjs

react-native

react-native-flatlist