React Native useEffect 和 useState 显示受控 TextInput 上的先前状态

Question

I am getting a very strange issue with React Native useState and useEffect and I can't work it out. I've got a simple form but have striped down all the components to one 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

How useEffect should work in my opinion here is printing the current state each time eg

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

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

etc..

But what I get is

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

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

So I'm getting a mixture of states (previous and old)

Answer 1

per the behavior you had, it looks like you return the second console.log as cleanup function in the useEffect. it's very odd if you didn't.

that's why I said add a semicolon at end. It's possible useEffect implictly return your second console.log as a cleanup function, because you don't have a semicolon at end of your 1st console.log? I'm just guessing.