React中如何在循环内为Material UI输入框绑定数组值？

核心问题点 #

循环渲染数组元素时，react-hook-form的Controller需要正确指定数组索引对应的字段路径，同时封装的InputText组件要正确接收并处理Controller传递的value和onChange属性。常见错误包括：

• 循环时字段名未带上数组索引（比如用education.school而非education[${index}].school）
• InputText组件未正确转发onChange事件给Controller
• 数组元素初始化不完整，导致Controller无法正确绑定值

修复步骤 #

1. 修正InputText.js组件 #

确保组件正确接收Controller传递的属性，且绑定到Material UI输入组件上：

// InputText.js
import React from 'react';
import { TextField, FormHelperText } from '@mui/material';

const InputText = ({ label, value, onChange, error, helperText, ...rest }) => {
  return (
    <>
      <TextField
        label={label}
        value={value || ''} // 处理空值避免显示undefined
        onChange={(e) => onChange(e.target.value)} // 直接传递输入值给Controller
        error={!!error}
        {...rest}
        fullWidth
        variant="outlined"
      />
      {error && <FormHelperText error>{helperText}</FormHelperText>}
    </>
  );
};

export default InputText;

2. 修正AddEditUser.js的循环与Controller绑定 #

循环时给每个Controller指定带数组索引的字段路径，同时完善数组初始化逻辑：

// AddEditUser.js
import React, { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import InputText from './InputText';
import { Button, Box } from '@mui/material';

const AddEditUser = () => {
  const { control, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      // 初始化教育经历数组，确保每个元素有对应字段
      education: [{ school: '', degree: '', year: '' }]
    }
  });

  const [educationList, setEducationList] = useState([{ id: 1 }]); // 用唯一id做key更可靠

  // 添加新的教育经历项
  const addEducation = () => {
    setEducationList(prev => [...prev, { id: Date.now() }]);
  };

  // 提交表单打印数据
  const onSubmit = (data) => {
    console.log('表单数据:', data);
  };

  return (
    <Box component="form" onSubmit={handleSubmit(onSubmit)} sx={{ p: 3 }}>
      {educationList.map((item, index) => (
        <Box key={item.id} sx={{ mb: 2 }}>
          <h4>教育经历 {index + 1}</h4>
          {/* 绑定数组索引对应的字段 */}
          <Controller
            name={`education[${index}].school`}
            control={control}
            rules={{ required: '学校名称不能为空' }}
            render={({ field: { value, onChange } }) => (
              <InputText
                label="学校名称"
                value={value}
                onChange={onChange}
                error={errors.education?.[index]?.school}
                helperText={errors.education?.[index]?.school?.message}
              />
            )}
          />

          <Controller
            name={`education[${index}].degree`}
            control={control}
            rules={{ required: '学位不能为空' }}
            render={({ field: { value, onChange } }) => (
              <InputText
                label="学位"
                value={value}
                onChange={onChange}
                error={errors.education?.[index]?.degree}
                helperText={errors.education?.[index]?.degree?.message}
              />
            )}
          />

          <Controller
            name={`education[${index}].year`}
            control={control}
            rules={{ required: '毕业年份不能为空' }}
            render={({ field: { value, onChange } }) => (
              <InputText
                label="毕业年份"
                value={value}
                onChange={onChange}
                error={errors.education?.[index]?.year}
                helperText={errors.education?.[index]?.year?.message}
              />
            )}
          />
        </Box>
      ))}

      <Button onClick={addEducation} variant="outlined" sx={{ mb: 2 }}>
        添加教育经历
      </Button>

      <Button type="submit" variant="contained">
        提交
      </Button>
    </Box>
  );
};

export default AddEditUser;

关键注意事项 #

• 字段名格式：数组类型字段必须用education[${index}].fieldName格式，react-hook-form才能正确识别数组元素。
• 循环key值：不要用数组索引作为key（除非数组不会增删），用唯一id避免React渲染异常。
• 空值处理：给InputText的value设置默认空字符串，避免输入框显示undefined。
• 错误信息获取：数组的错误信息需通过errors.education?.[index]?.fieldName获取，用可选链避免报错。

内容的提问来源于stack exchange，提问作者Kishan Bhensadadiya