时间戳

首页 > 解决方案 > 从反应本机中的多个开关中获取价值

javascript - 从反应本机中的多个开关中获取价值

问题描述

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

我想像 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...')。

标签： javascriptreact-nativereact-native-flatlist

解决方案

在子组件上创建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) =>， stData在 this 范围内renderItem不再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可能采取行动

推荐阅读