Question

我在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"}

所以我混合了状态（旧状态和旧状态）

Answer 1

根据您的行为，看起来您像在useEffect中返回了第二个console.log作为清理函数。如果没有，那很奇怪。

这就是为什么我说在末尾添加分号的原因。 useEffect可能隐式将第二个console.log作为清理函数返回，因为在第一个console.log的末尾没有分号？我只是在猜测。

反应本机useEffect和useState在受控TextInput上显示先前状态

1 个答案: