Material UI Autocomplete选中值提交为数字0/数组如何转字符串

你现在的代码存在两个核心逻辑错误，直接导致分类字段提交异常、最终存为0：

• 状态混用：把「接口返回的全部分类选项列表」和「用户实际选中的分类值」存在同一个categories状态里：初始化是空字符串，拉取分类列表时直接把全量选项数组覆盖进这个状态，用户选择时又会再次覆盖该状态，逻辑完全冲突。
• 取值方式错误：Material UI 多选Autocomplete组件的onChange回调签名为(event, selectedValue) => void，第二个参数才是选中的选项数组，你写的e.target.value是原生input事件的取值方式，在自定义组件上拿不到有效值，最终传了undefined到后端，MongoDB做类型转换时就会存为数字0。

按照以下步骤调整即可：

• 拆分两个独立状态：一个专门存储接口返回的全部分类选项，一个专门存储用户选中的分类值，多选模式下选中值初始值设为空数组，不要用空字符串。
• 修正Autocomplete的onChange回调，从第二个参数取选中值，同时给组件显式绑定value属性做受控控制。
• 提交前把选中的分类对象数组映射为纯字符串数组，符合后端存储要求。

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import { useState, useEffect } from 'react';
import axios from 'axios';

export default function Write() {
  // 拆分状态：全部分类选项、用户选中分类、标题
  const [allCategories, setAllCategories] = useState([]);
  const [selectedCats, setSelectedCats] = useState([]);
  const [title, setTitle] = useState("");
  // 保留你原有的用户信息逻辑
  const user = { username: "" };

  const handlerSubmit = async (e) => {
    e.preventDefault();
    // 提取选中分类的name字段，转为纯字符串数组提交
    const submitCategories = selectedCats.map(item => item.name);
    const newPost = {
      username: user.username,
      title,
      categories: submitCategories,
    };
    // 保留你原有的文件上传逻辑
    try {
      const res = await axios.post("/posts", newPost);
      // 自行补充提交成功后的跳转、提示逻辑
    } catch (err) {
      console.error(err);
    }
  }
           
  useEffect(() => {
    const getCats = async () => {
      const res = await axios.get("/categories");
      // 全量分类存入专门的选项状态
      setAllCategories(res.data);
    };
    getCats();
  }, []);
      
  return (
    <div className='write'>
      <form className="writeForm" onSubmit={handlerSubmit}>
        <input
          className="writeTitleInput"
          required
          type="text"  
          placeholder="title"  
          autoFocus={true}
          onChange={e => setTitle(e.target.value)}
        />
                        
        <Autocomplete
          multiple
          limitTags={3}
          id="tags-standard"
          options={allCategories}
          value={selectedCats}
          getOptionLabel={option => option?.name || ""}
          // 从回调第二个参数取选中值
          onChange={(_, newValue) => setSelectedCats(newValue)} 
          renderInput={(params) => (
            <TextField
              {...params}
              variant="standard"
              label="Multiple values"
              placeholder="Choose a Category"
            />
          )}
        />
                    
        <button className="writeSubmitButton" type="submit">Publish</button>
      </form>
    </div>
  )
}

如果你不需要多选功能，只要单个分类字符串，去掉Autocomplete上的multiple属性，提交时直接取selectedCat?.name即可。

内容的提问来源于stack exchange，提问作者sultan.h