Javascript 从react native中的多个开关获取值

根据从数据库获取的行数，我在一个组件中有多个开关（大约40到70）。我使用平面列表中的每一行渲染每个开关（每个项目都指定了一个ID）。最后，我想提交所有的值，并将它们与id和it一起存储在数据库中；s相应的开关状态（真/假）

我想像HTML中的表单一样，在提交表单后，我们可以获得表单的所有值

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

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}
          />
       )}
   />

const[stData，setStData]=useState（[]）；
useffect（（）=>{
//在这里，我使用axios从服务器获取数据
//设置数据（获取数据）；
})
项目.注册_id}
renderItem={（stData）=>(
)}
/>

这是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>

{props.name}
{props.id}
props.setData(
道具数据地图（（项目）=>
item.registration\u id==props.registrationNo
？{…项，isPresent:！props.isPresent}
：项目
)
)
}
值={props.isPresent}
/>

更新

---

现在，每当我尝试切换开关按钮时，类型错误：未定义不是函数（靠近“…props.data.map…”）就会出现。

在创建

const[isPresent，setIsPresent]=useState（false）时在子组件中，将它添加到<代码> StDATAs/COD>之后，会使它有点粗糙，请考虑从乞讨
中存储它。

/>


现在
data={stData}
将正确评估，并且
data.map
将是可能的操作
实际上，我正在从数据库（使用useReducer）中获取stData，这是根据来自数据库的数据预定义的。stData是一个数组形式的数组[Object{“id”：1，“name”：“Sameer”}，Object{“id”：2，“name”：“Dev”}]，希望我的答案能满足您的需要。我在名为
isPresent
的数据中添加了一个新字段。但是我得到了TypeError:undefined不是一个函数（靠近“…props.data.map…”），你能用当前代码编辑你的问题吗，以及预期的行为？我解决了它。你是对的。问题出现在
renderItem={（{item}）
// 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>

  <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}
      />
   )}