从反应原生的多个开关中获取价值

Question

我在一个组件中有多个开关（大约 40 到 70 个），具体取决于从数据库中获取的行数。我正在用平面列表中的每一行渲染每个开关（每个项目都分配有一个 ID）。最后，我想提交所有值并将它们与 id 及其各自的开关状态（true / false）一起存储在数据库中。

我想像 HTML 中的表单一样，在提交表单后获取表单的所有值。

这是渲染 flatlist 的组件。我删除了不必要的代码，因为我能够在没有任何错误和警告的情况下显示平面列表。

const [stData, setStData] = useState([]);
useEffect(()=> {
   // Here I am fetching data from server using axios
   // setStData(fetchedData);
})
<View>

  <FlatList
      data={stData}
      keyExtractor={(item) => item.registration_id}
      renderItem={(stData) => (
          <ListItem
             name={stData.item.name}
             registrationNo={stData.item.registration_id}
             data={stData}
             isPresent={stData.item.isPresent}
             setData={setStData}
          />
       )}
   />

这是 ListItem 组件

<View>
      <View>
        <Text>{props.name}</Text>
        <Text>{props.id}</Text>
      </View>
      <Switch
        trackColor={{ true: "red" }}
        thumbColor={"white"}
        onValueChange={() =>
          props.setData(
            props.data.map((item) =>
              item.registration_id === props.registrationNo
                ? { ...item, isPresent: !props.isPresent }
                : item
            )
          )
        }
        value={props.isPresent}
      />
</View>

更新 现在，每当我尝试切换开关按钮时，都会发生 TypeError: undefined is not a function (near '...props.data.map...')。

Answer 1

在子组件中创建const [isPresent, setIsPresent] = useState(false); 时，您将其添加到stData 时会有点粗糙，请考虑将其存储在那里

---

// dummy data with { isPresent } at main obj
const [data, setData] = useState(stData.map(obj => {...obj, isPresent: false})


<View>
   <FlatList
       data={data}
       keyExtractor={(item) => item.id}
       renderItem={({item, id, isPresent}) => (
     <ListItem
         name={item}
         id={id}
         data={data}
         setData={setData}
         isPresent={isPresent}
     />
    )}
   />
</View>





// child component
<View>
   <View>
      <Text>{props.name}</Text>
      <Text>{props.id}</Text>
   </View>
   <Switch
    trackColor={{ true: "red" }}
    thumbColor={"white"}
    onValueChange={() => props.setData(props.data.map(item => item.id == props.id ? { ...item, isPresent: !props.isPresent } : item)}
    value={props.isPresent}
  />
</View>

---

编辑

当您致电renderItem={(stData) => 时， 在这个renderItem 范围内的stData 不再是来自状态的stData，包括data={stData}

改成

---

  <FlatList
   data={stData}
   keyExtractor={(item) => item.registration_id}
   renderItem={({item}) => (
      <ListItem
         name={item.name}
         registrationNo={item.registration_id}
         data={stData}
         isPresent={item.isPresent}
         setData={setStData}
      />
   )}

/>

---

现在data={stData}将正确评估，data.map 将是可能的操作