Получить значение от нескольких Switch в реагировать родной - PullRequest
Новая
       16

Получить значение от нескольких Switch в реагировать родной

0 голосов
/ 26 апреля 2020

У меня есть несколько переключателей (около 40 до 70) в компоненте в зависимости от количества строк, выбранных из базы данных. Я отображаю каждый переключатель с каждой строкой в ​​плоском списке (каждому элементу присваивается идентификатор). В конце я хочу отправить все значения и сохранить их в базе данных вместе с идентификатором и, соответственно, соответствующим статусом переключателя (true / false).

Я хочу сделать это как форму в 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}
          />
       )}
   />

Это компонент 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 не является функцией (рядом с '... props.data.map ...') * происходит 1014 *.

1 Ответ

0 голосов
/ 26 апреля 2020

Создавая 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 в области действия этого 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 будет возможным действием

...