React Native useEffect и useState, показывающий предыдущее состояние контролируемого TextInput - PullRequest
Новая
       33

React Native useEffect и useState, показывающий предыдущее состояние контролируемого TextInput

1 голос
/ 14 января 2020

У меня очень странная проблема с React Native useState и useEffect, и я не могу решить ее. У меня есть простая форма, но я сократил все компоненты до одного TextInput

import React, { useState, useEffect } from 'react'
import { TextInput } from 'react-native'

const InputExample = () => {
  const [name, setName] = useState('')


  useEffect(() => {
    console.log('1:', name)
    console.log('2:', name)
  }, [name])

  return (
    <TextInput
      placeholder="First name"
      maxLength={100}
      value={name}
      onChangeText={(text) => setName(text)}
      style={{ margin: 20, fontSize: 20, borderColor: 'black', borderWidth: 1, padding: 10 }}
    />
  )
}

export default InputExample

Как должно работать useEffect, на мой взгляд, здесь каждый раз выводится текущее состояние, например 

// First Render - Text Input 'P'
1: {firstName: "P"}
2: {firstName: "P"}

// Second Render - Text Input 'Pe'
1: {firstName: "Pe"}
2: {firstName: "Pe"}

etc..

Но я получаю 

// First Render - Text Input 'P'
1: {firstName: "P"}

// Second Render - Text Input 'Pe'
2: {firstName: "P"}
1: {firstName: "Pe"}

Итак, я получаю смесь состояний (предыдущих и старых)

1 Ответ

0 голосов
/ 14 января 2020

в соответствии с вашим поведением, похоже, что вы возвращаете второй console.log в качестве функции очистки в useEffect. это очень странно, если вы этого не сделали.

, поэтому я сказал добавить точку с запятой в конце. Возможно, useEffect неявно возвращает ваш второй console.log в качестве функции очистки, поскольку у вас нет точки с запятой в конце вашего первого console.log? Я просто догадываюсь.

...