React复用组件状态异常：状态始终保留最后加载实例的值

问题根源 #

你编写的InputTextFieldView是函数组件，但内部错误使用了类组件的方法定义语法：

toggleSecureTextEntry = () => {
    console.log('title', title)
    setIsSecureEntryEnabled(!isSecureEntryEnabled)
}

这种写法在函数组件中属于非法语法，会导致组件实例的方法绑定出现异常，多个组件实例会共用同一个toggleSecureTextEntry函数引用，最终触发状态更新时只会影响最后渲染的组件实例。

修复方案 #

将函数组件内的方法改为标准的函数声明方式，同时修正TextInput的输入值传递逻辑（原写法无法更新父组件的输入状态）：

修正后的组件代码 #

const InputTextFieldView = ({ enteredText, setEnteredText, title, icon, isSecureEntry, placeholder }) => {

  const [isSecureEntryEnabled, setIsSecureEntryEnabled] = useState(isSecureEntry)
  const eyeOpenIcon = require('../../../assets/visibility.png')
  const eyeCloseIcon = require('../../../assets/close-eye.png')

  useEffect(() => {
      console.log('called', title) // 加上title方便区分不同组件实例
  }, [])

  // 改用函数组件内的标准函数声明
  const toggleSecureTextEntry = () => {
      console.log('title', title)
      // 使用函数式更新状态，避免依赖当前状态值的潜在问题
      setIsSecureEntryEnabled(prevState => !prevState)
  }

  return (
      <View style={styles.fieldsContainerView}>
          <Text style={styles.titleStyle}>{title}</Text>
          <View style={[styles.fieldInputContainerView, {padding: Platform.OS === 'ios' ? 12 : 0}]}>
              <Image source={icon} style={styles.fieldIconView} />
              {/* 修正输入值传递逻辑，用onChangeText接收输入文本 */}
              <TextInput 
                secureTextEntry={isSecureEntryEnabled} 
                style={{ width: isSecureEntry ? '75%' : '85%' }} 
                onChangeText={text => setEnteredText(text)} 
                value={enteredText} 
                placeholder={placeholder} 
              />
              {isSecureEntry &&
                  <TouchableWithoutFeedback onPress={toggleSecureTextEntry}>
                      <Image source={isSecureEntryEnabled ? eyeOpenIcon : eyeCloseIcon} style={styles.fieldIconView} />
                  </TouchableWithoutFeedback>
              }
          </View>
      </View>
  )
}

额外优化点 #

1. 使用函数式更新修改状态：setIsSecureEntryEnabled(prevState => !prevState)，避免因状态值快照导致的更新滞后问题。
2. 替换onChange为onChangeText，正确将输入文本传递给父组件的状态更新函数，确保输入内容能正常同步。
3. 给useEffect添加title依赖，便于调试不同组件实例的生命周期触发情况。

内容的提问来源于stack exchange，提问作者Jatin Garg