Неверно обновлено значение средства выбора React native

#reactjs #react-native #setstate

#reactjs #реагировать-родной #setstate установить состояние

Вопрос:

Я работаю в react native и использую picker его как выпадающее меню

   <Picker
         style={styles.picker}
         selectedValue={selectedsubject}
         onValueChange={(subjectValue) => pickerActivity(subjectValue)}>
          {allsubjects.map((item, index) => {
                            return (<Picker.Item label={item} value={item} key={index} />)
           })}
   </Picker>
 

onValueChange prop Я вызываю эту функцию:

 const pickerActivity = (val) => {
        setselectedsubject(val)
        console.log("============")
        console.log(val)
        console.log(selectedsubject)
        console.log("============")

    }
 

поэтому, когда значение выбрано из пунктов меню, я передаю выбранное значение функции pickerActivity , в этой функции я обновляю статус selectedsubject до переданного значения, а затем я сохраняю статус и значение, и в списке у меня есть два значения let say ( value1 and value2 ) , так что давайте предположим, что я нажал value1 , и что произошло: это только консоль регистрирует переданное значение, а для статуса она регистрирует пустую строку консоли, как показано ниже:

 [Sat Jan 23 2021 19:43:28.899]  LOG      ============
[Sat Jan 23 2021 19:43:28.900]  LOG      value1
[Sat Jan 23 2021 19:43:28.901]  LOG      
[Sat Jan 23 2021 19:43:28.902]  LOG      ============
 

и во второй раз, когда я нажимаю, например, on value2 из выпадающего меню, переданное значение будет value2 правильным, но для статуса в нем будет отображаться предыдущий элемент, выбранный из меню, который value1 , как показано ниже:

 [Sat Jan 23 2021 19:43:28.899]  LOG      ============
[Sat Jan 23 2021 19:43:28.900]  LOG      value2
[Sat Jan 23 2021 19:43:28.901]  LOG      value1
[Sat Jan 23 2021 19:43:28.902]  LOG      ============
 

итак, проблема в том, что статус не обновляется с первого раза, и вот мой статус:

 const [selectedsubject, setselectedsubject] = useState('')  
 

Комментарии:

1. reactjs.org/docs/react-component.html#setstate «Думайте о setState() как о запросе, а не как о немедленной команде для обновления компонента».

2. @NadiaChibrikova как добиться этого с помощью функциональных компонентов?

3. Чего вы пытаетесь достичь? В обработчике, который вы можете использовать val , и при следующем рендеринге значение будет обновлено, какие проблемы у вас есть, кроме запутанных журналов консоли?

Ответ №1:

Вы должны определить функцию set-state с заглавной буквы следующим образом.

 const [selectedsubject, setSelectedsubject] = useState('');
 

На данный момент вы вызываете console.log до обновления состояния.
Чтобы просмотреть обновленное состояние, вам необходимо использовать useEffect, который срабатывает только при обновлении состояния:

 useEffect(() => {
  console.log(selectedsubject);
})
 

Ответ №2:

Обновление состояния с использованием средства обновления, предоставляемого useState hook, является асинхронным и не будет отражено немедленно.

Несмотря setselectedsubject(val) на то, что оно запущено, selectedsubject значение обновляется не сразу. Оно сохранит предыдущее значение.