无法在 React Native 应用程序的列表项中更改 Switch 的值

Question

在 FlatList 中，我显示 ListItem 元素。每个 ListItem 都有一个 Text 和一个 Switch。每次焦点在屏幕上时，都会通过 API 调用检索元素列表。

我在尝试更改 ListItem 的 Switch 的值时遇到问题，onValueChanged 未被触发并且 Switch 总是返回到其初始值。

我正在使用下面的代码。知道我在这里遗漏了什么吗？

function Item({ name, active }) {
  const [act, setAct] = useState(active);

  return (
    <ListItem
        title={ name }
        hideChevron
        switch={
          <Switch
            onValueChange={(v) => {  updateActivation(name, v) }} // API call to change the item's value. This method does not seem to be called !!
            value={act}
           />
        }
        bottomDivider
      />
  );
};

export function ListScreen({ navigation }) {
  const [error, setError] = useState(null);
  const [elements, setElements] = useState([]);

  // Update the list of elements each time the focus comes to the current screen
  // This part is working fine
  useFocusEffect(
    React.useCallback(() => {
      console.log("screen focused => update list of elements")
      async function elements() {
        await getElements();
      }
      elements();
    }, [])
  );

  async function getElements() {
    try {
      let response = await api.getElements();
      setElements([...response]);
    }  catch (error) {
      console.log(error)
    }
  }

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={elements}
        keyExtractor={item => item.name}
        renderItem={({ item }) =>
          <Item name={item.name}
                active={item.active}
          />
        }
      />
    </SafeAreaView>
  );
};

Answer 1

问题是您的 onvaluechange 正在触发，但您没有更新具有开关值的状态中的 'act' 值。

 <Switch
   onValueChange={(v) => {  
         updateActivation(name, v);
         setAct(v);
   }} 
   value={act}/>

您还可以选择等待 updateActivation 或使用 "then" 然后更新状态值，这将更新 UI。

Answer 2

更改开关的定义解决了这个问题。在这种情况下会正确触发 onValueChange。

<ListItem
        title={ name }
        hideChevron
        switch={{
            onValueChange: (v) => {  updateActivation(name, v) } // API call to change the item's value. This method does not seem to be called !!
            value: act
        }}
        bottomDivider
/>

无法在 React Native 应用程序的列表项中更改 Switch 的值

Cannot change the value of a Switch within a ListItem in a ReactNative application

react-native

react-native-flatlist