Почему моя функция экспорта вызывается каждый раз при изменении TextInput
Привет, вот мой код в сценарии реагирования и ввода. Почему этот console.info вызывается каждый раз, когда мой текстовый файл вызывает изменение..
export default function TabOneScreen({
navigation,
}) {
const [out_1, set_out1] = useState('');
const [out_2, set_out2] = useState('');
const [main_device, setMain_dev] = useState('');
console.info("run every time .. on text changed .."); // on change text run every time ..
// here I had some function for init textInput value and don't want to run every time ..
return (
<View style = {styles.container}>
<View style = {{
}}>
<TextInput
value = {out_1}
onChangeText = {(username) => set_out1(username)}.
/>
Ответы 4
Каждый раз, когда текст изменяется, он запускает функцию, которая меняет состояние, и каждый раз, когда состояние изменяется, компонент перезапускается, как и console.info. Вы должны обернуть свой console.info или функцию в хук useEffect, например:
useEffect(()=> {
console.info('...')
}, [])
Итак, как я мог предотвратить это?
У меня была функция, которая загружала данные для ввода текста только для init , но она запускается каждый раз при изменении и больше не позволяет сохранять.
Потому что каждый раз, когда вы меняете состояние, функция будет вызываться с новым состоянием. Основной жизненный цикл компонента реакции: Mounting , Updating, Unmounting.
Когда вы впервые визуализируете элемент, он находится на этапе монтажа. После этого, когда вы измените состояние элемента или его свойства, они будут обновлены. И когда элемент будет удален, он находится в фазе размонтирования. При каждом обновлении состояния весь компонент снова визуализируется с использованием той же функции. Чтобы вызвать это только один раз, вам нужно использовать его на этапе монтирования. Сделать это:
useEffect(() => console.info("run every time .. on text changed ..") , [])
useEffect принимает два аргумента: первый — это функция, которую нужно запустить, а второй — состояние запуска этой функции. Здесь [] просто означает запускать это только на этапе монтажа. Чтобы вызвать другое состояние и запустить его, вы помещаете его внутрь массива. Например, предположим, что вы хотите, чтобы он запускался только при изменении состояния out_1, вы можете добавить его во второй параметр:
useEffect(() => console.info("run every time .. on out_1 changes ..") , [out_1])
Это означает, что запускайте эту функцию только при изменении out_1.
Если вы собираетесь получать данные из API или любого другого ресурса, которые вам нужны перед первым рендерингом, и вам не нужно повторять это снова, то фаза монтирования (пустой массив []) — это время, когда вам нужно получить эти данные.
Спасибо, не могли бы вы обновить свой ответ и заполнить [] состоянием? еще раз спасибо
большое спасибо , это работа .. вы похожи с ЭКСПО ?
Да, я знаком с экспо
Очень хорошо, не могли бы вы посмотреть эту тему: stackoverflow.com/questions/65103398/…
добрый день, как мне кажется см. react сравнивает старый virtualDOM и новый модифицированный virtualDOM, то есть когда вы делали setState, вы вызывали изменение состояния компонента, а так как console. log находит его в теле, он его просто нарисовал.
когда вы меняете текст внутри ввода, вы устанавливаете свое состояние.
onChangeText = {(username) => set_out1(username)}
Теперь, когда ваше состояние изменяется, оно вызывает метод рендеринга. поэтому ваш компонент будет сравнивать свой дом со старым домом и повторно отображать компонент.
чтобы предотвратить это использование, можно использовать методы жизненного цикла или условные операторы, чтобы избежать вызова метода. или вы можете использовать формик.
Итак, как я мог предотвратить это?