"defaultValue"选项没有在自动完成下拉菜单中选择默认值。

Question

以下是您提供的代码的中文翻译：

// API 返回的 NPA 数据
const stateNPAValue = {
  [formData.state.value]: {
    0: "All",
    1: "959",
    2: "203",
    3: "860",
    4: "475"
  }
};

const [selectedNamesState, setSelectedNamesState] = useState([]);

const transformedNpaData = stateNPAValue[formData.state.value].map((label, index) => ({
  label,
  value: index.toString()  // 可以使用索引作为值，或任何唯一标识符
}));

 {
    setSelectedNamesState(newValue);
    NPAHandler(newValue);
    changeHandleStateErrorRemove(event);
  }}
  options={transformedNpaData}
  getOptionLabel={(option) => option.label.replace(/[']+/g, '')}
  defaultValue={[transformedNpaData[0].label]}  // 试图将“所有”设为默认值
  renderTags={(tagValue, getTagProps) =>
    tagValue.map((option, index) => (
      
    ))
  }
  style={{ width: 500 }}
  renderInput={(params) => }
  isOptionEqualToValue={(option, value) => {
    return option.value === value.value;
  }}
/>

我想在多选下拉框中将“所有”设为默认值，但 defaultValue 选项不起作用。请告诉我这段代码有什么问题。

Ori Drori · Answer

看起来您的组件及其属性期望的数据类型如下所示，您已正确地为 options 属性提供了这种类型的数据。我认为 defaultValue 也应该保持相同的类型：

interface AutocompleteOption {
  label: string;
}

因此，我认为将默认值更改为如下形式应该可以解决此问题：

// ...

Aaron Digulla · Answer

您正在使用受控输入渲染 Autocomplete 组件。在这种情况下，您需要在控制 Autocomplete 选定值的 useState 中设置默认值。您可以参阅此处的文档：Autocomplete API 文档。文档中这样写道：

defaultValue: 默认值。在组件处于非受控状态时使用。

假设选项 “All” 总是位于列表顶部，您可以按如下方式初始化 selectedNamesState：

const [selectedNamesState, setSelectedNamesState] = useState([
  {
    label: "All",
    value: "0",
  },
]);

您的 options 数组是对象数组。如果您愿意将其转换为字符串数组，解决方案会更加简单：

import { Autocomplete, Chip, TextField } from "@mui/material";
import { useState } from "react";

const someKey = "someKey";
const stateNPAValue = {
  [someKey]: ["All", "959", "203", "860", "475"],
};

function App() {
  const [selectedNamesState, setSelectedNamesState] = useState(["All"]);

  const transformedNpaData = stateNPAValue[someKey];

  return (
    
       {
          setSelectedNamesState(newValue);
        }}
        options={transformedNpaData}
        getOptionLabel={(option) => {
          return option.replace(/[[\]']+/g, "");
        }}
        // defaultValue={[transformedNpaData[0].label]}
        renderTags={(tagValue, getTagProps) =>
          tagValue.map((option, index) => (
            
          ))
        }
        style={{ width: 500 }}
        renderInput={(params) => }
      />
    
  );
}

export default App;