Невозможно изменить значение Switch в ListItem в приложении ReactNative - PullRequest
Новая
       19

Невозможно изменить значение Switch в ListItem в приложении ReactNative

0 голосов
/ 06 мая 2020

В FlatList я отображаю элементы ListItem. Каждый ListItem имеет текст и переключатель. Каждый раз, когда фокус находится на экране, список элементов извлекается через вызов API.

У меня проблема при попытке изменить значение ListItem's 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>
  );
};

Ответы [ 2 ]

0 голосов
/ 06 мая 2020

Исправлено изменение определения переключателя. В этом случае 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
/>
0 голосов
/ 06 мая 2020

Проблема в том, что ваш onvaluechange запускается, но вы не обновляете значение 'act' в своем состоянии, которое имеет значение переключателя. 

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

Вы также можете выбрать awaut updateActivation или go с «then», а затем обновить значение состояния, которое обновит пользовательский интерфейс.

...