Redux Form渲染组件时显示剩余输入字符，遇setState未定义错误

错误原因分析 #

你写的renderField是一个函数式组件，不是类组件，所以组件内部没有this上下文，自然调用this.setState或者直接赋值this.state都会报错。函数组件需要用React的useState钩子来管理内部状态，而不是类组件的this.state方式。

另外，我注意到这个组件看起来是配合redux-form使用的（因为有meta和input参数），所以还要协调redux-form的表单值更新和本地状态更新，确保两者同步。

修复后的代码 #

// 首先确保导入useState钩子
import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';

const renderField = ({ label, keyboardType, name, meta: { touched, error }, input: { onChange, value: formValue } }) => {
  // 使用useState初始化本地状态，同步redux-form的表单值
  const [inputValue, setInputValue] = useState(formValue || '');

  // 同时更新redux-form的表单值和本地状态
  const handleChangeText = (value) => {
    setInputValue(value);
    onChange(value); // 通知redux-form更新表单值
  };

  // 计算剩余字符数
  const charactersLeft = 100 - inputValue.length;

  return (
    <View style={{ flexDirection: 'column', height: 70, alignItems: 'flex-start' }}>
      <View style={{ flexDirection: 'row', alignItems: 'center', borderColor: 'black', borderBottomWidth: 1 }}>
        <TextInput
          style={{ height: 37, width: 295, paddingLeft: 10, fontSize: 20, height: 350, justifyContent: "flex-start" }}
          keyboardType={keyboardType}
          value={inputValue}
          onChangeText={handleChangeText}
          placeholder={label}
          numberOfLines={10}
          multiline={true}
          maxLength={100}
        />
      </View>
      <Text>Characters Left: {charactersLeft}/100</Text>
      {touched && error && (
        <Text style={{ color: 'red' }}>{error}</Text>
      )}
    </View>
  );
};

关键修改点说明 #

• 替换this.state为useState：函数组件用useState钩子创建本地状态inputValue和更新函数setInputValue，初始值同步redux-form传来的formValue，确保表单已有值时显示正确。
• 合并 onChange 逻辑：自定义handleChangeText函数，同时更新本地状态和redux-form的表单值，避免两者状态不一致。
• 修正剩余字符计算：原来的this.state.value.length/100显示的是已输入字符数，改成100 - inputValue.length才是剩余可输入的字符数，更符合需求。
• 简化条件渲染：把touched && ((error && <Text>))简化为touched && error && <Text>，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Markus Hayner