MUI React多选下拉框嵌套JSON表单提交问题求助

1. 正确传递现有选中值到多选下拉框 #

多选下拉框的value需要接收materialId数组，而非单个值。将原代码中的value属性修改为：

value={values.materials?.map(material => material.materialId) || []}

这段代码会从现有materials数组中提取所有materialId，传递给下拉框实现默认勾选。

2. 修复嵌套数组更新逻辑，避免新增字段 #

原handleInputChange仅能处理平级字段，无法正确更新嵌套数组，需从两部分调整：

调整组件的name属性 #

将name直接设为'materials'，明确要直接替换整个materials数组：

<DropdownMultiSelect
    onChange={handleInputChange}
    label='Materials'
    name='materials'
    value={values.materials?.map(m => m.materialId) || []}
    prompt='Materials...'
    url={materialsURL}
/>

修改handleInputChange函数 #

根据下拉框返回值的类型，分两种情况处理：

• 如果下拉框返回选中的materialId数组：
  需要将id转换为符合原格式的对象数组，再更新values：

  const handleInputChange = e => {
    const { name, value } = e.target;
    if (name === 'materials') {
      // 假设你有materialsOptions数组存储所有可选物料数据
      const updatedMaterials = value.map(id => {
        const matched = materialsOptions.find(m => m.materialId === id);
        return {
          materialId: id,
          materialName: matched?.materialName || ''
        };
      });
      setValues({
        ...values,
        [name]: updatedMaterials
      });
    } else {
      // 其他平级字段的原有处理逻辑
      setValues({
        ...values,
        [name]: (typeof value === 'string' ? value.replace(/ +(?= )/g, '').trimStart() : value)
      });
    }
  };
  

• 如果下拉框直接返回完整物料对象数组：
  可直接替换原materials数组：

  const handleInputChange = e => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value
    });
  };
  

原写法新增字段的原因 #

原handleInputChange会将name字符串直接作为对象键添加到values中，而非解析嵌套路径更新原数组。比如name='materials[0].materialId'会被当作独立字段名，导致新增"materials[0].materialId"这类冗余字段，而非修改materials数组内的元素。

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