React动态表单用子组件渲染输入触发非受控组件警告如何解决

问题原因 #

• 输入组件同时配置了value和defaultValue属性：React中受控组件仅使用value控制输入内容，defaultValue是非受控组件的专属属性，二者同时使用会导致状态管理冲突。
• 表单初始状态为空对象：初始渲染时form.name、form[variant${index}]等字段的值都是undefined，React会默认将对应输入框判定为非受控组件；当你输入内容更新表单state后，这些字段变成有值的字符串，组件从非受控切换为受控，就会触发对应的警告。
• 字段配置和表单值耦合：你将服务端获取的字段配置sizes存在表单state中，不属于用户输入的配置数据和表单值混存，容易引发额外的状态更新问题。
• 子组件的onChange默认值设置错误：原本的默认值是空字符串，实际需要是一个空函数，否则调用时会触发类型错误。

解决方法 #

1. 删除所有输入框上的defaultValue属性，受控组件不需要该配置。
2. 给输入框的value属性添加兜底值，保证永远不会返回undefined，或者在初始化表单state时就预置所有可能用到的字段默认值。
3. 单独用一个state存储从服务端获取的字段配置sizes，不要和表单输入值混存在同一个state对象中。
4. 如果需要给动态生成的variant字段设置默认值0，可以在拿到sizes配置后，同步初始化表单对应的字段值。
5. 修正子组件onChange参数的默认值为空函数。

修正后代码 #

Edit.js

import { useState, useEffect } from 'react';
import ItemVariants from './ItemVariants';

export default function InventoryItemEdit() {
  // 单独存储服务端返回的字段配置
  const [sizes, setSizes] = useState([]);
  // 初始化表单预置公共字段默认值
  const [form, setForm] = useState({
    name: ''
  });

  // 从服务端拉取sizes配置的逻辑
  useEffect(() => {
    const fetchSizes = async () => {
      // 替换为实际接口请求逻辑
      const res = await fetch('/api/getSizes');
      const data = await res.json();
      setSizes(data);
      // 初始化动态字段的默认值为0
      const initVariantFields = {};
      data.forEach((_, index) => {
        initVariantFields[`variant${index}`] = '0';
      });
      setForm(prev => ({...prev, ...initVariantFields}));
    };
    fetchSizes();
  }, []);

  function handleFormChange(e) {
    setForm({ ...form, [e.target.name]: e.target.value });
  }

  const variants = (
    <ItemVariants
      form={form}
      onChange={handleFormChange}
      fields={sizes} 
    />
  );

  const updateItem = async (event) => {
    event.preventDefault();
    // 表单提交逻辑
  };

  return (
    <form onSubmit={updateItem}>
      <div>
        <p htmlFor="name">Name</p>
        <input
          id="name"
          name="name"
          onChange={handleFormChange}
          value={form.name}
          type="text"
          required
          placeholder="Name of Item"
        />
      </div>
      {variants}
    </form>
  );
}

ItemVariants.js

export default function ItemVariants({
  form = {},
  onChange = () => {},
  fields = [],
}) {
  return (
    <>
      {fields.map((row, index) => (
         <div key={index}>
           <span>
             {row.name}
           </span>
           <input
             type="text"
             id={`variant${index}`}
             name={`variant${index}`}
             onChange={onChange}
             value={form[`variant${index}`] ?? ''}
             required
             min="0"
             placeholder="0"
           />
         </div>
      ))}
    </>
  );
}

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