#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
значение обновляется не сразу. Оно сохранит предыдущее значение.