Material UI Autocomplete组件TypeScript相等性问题求助

我帮你梳理下当前遇到的两个核心问题，然后给出具体的修复方案：

问题根源分析 #

1. Autocomplete值不匹配报错 #

Material-UI的Autocomplete默认使用**严格相等（===）**来判断传入的value是否和选项列表中的某一项匹配。你遇到的问题有两个诱因：

• 初始值类型不一致：你的initialValues里address.country可能是ICountry对象（当investor存在时）或者空字符串''（当investor不存在时），空字符串显然不在选项列表里，直接导致报错。
• 对象引用不匹配：即使初始值是ICountry对象，它可能和countries数组里的对象不是同一个引用（比如来自investors数据的对象和countries数组里的对象是两个独立的对象），严格相等判断会认为它们不匹配。

2. TypeScript类型错误 #

你的initialValues中address.country的类型是string | ICountry，但Autocomplete组件的value属性要求的类型是ICountry | ICountry[] | null | undefined，string类型无法被兼容，所以触发类型报错。

具体修复方案 #

步骤1：修正初始值类型，统一为ICountry | null #

把初始值里的默认值从空字符串''改成null，确保address.country的类型始终是ICountry | null，符合Autocomplete的要求：

initialValues={{
  address: {
    country: investor?.legal.address.country ?? null, // 用null替代''
  }
}}

步骤2：添加getOptionSelected属性，自定义匹配逻辑 #

告诉Autocomplete如何判断传入的值和选项是否匹配，我们可以通过iso字段来做判断（因为iso是唯一标识），而不是依赖对象引用：

<Autocomplete
  id="country"
  options={countries}
  getOptionLabel={option => option.label}
  getOptionSelected={(option, value) => option.iso === value.iso} // 新增这一行
  value={values.address.country}
  // ... 其他属性保持不变
/>

步骤3：修正onChange的类型定义 #

把onChange里的value类型从any改成ICountry | null，符合TypeScript的类型要求：

onChange={(e: React.ChangeEvent<{}>, value: ICountry | null) => {
  setFieldValue("address.country", value);
}}

完整修复后的核心代码片段 #

// ... 其他导入和定义保持不变

const App: React.FC = () => {
  const investor = investors.find(element => element.id === "123");
  return (
    <div className="App">
      <Formik
        initialValues={{
          address: {
            country: investor?.legal.address.country ?? null,
          }
        }}
        onSubmit={(values, actions) => {
          console.log({ values, actions });
          actions.setSubmitting(false);
        }}
      >
        {({ submitForm, isSubmitting, values, setFieldValue, setValues }) => {
          return (
            <form>
              <Autocomplete
                id="country"
                options={countries}
                getOptionLabel={option => option.label}
                getOptionSelected={(option, value) => option.iso === value.iso}
                value={values.address.country}
                renderOption={(option: ICountry) => (
                  <Box display="flex" flexDirection="row" alignItems="center">
                    <Box mr={1}>{isoToFlag(option.iso)}</Box>
                    <Box>
                      <Typography variant="body2">{option.label}</Typography>
                    </Box>
                  </Box>
                )}
                onChange={(e: React.ChangeEvent<{}>, value: ICountry | null) => {
                  setFieldValue("address.country", value);
                }}
                renderInput={params => (
                  <TextField
                    {...params}
                    name="address.country"
                    label="Country"
                    variant="outlined"
                    fullWidth
                  />
                )}
              />
              <Button
                variant="contained"
                size="large"
                color="primary"
                disabled={isSubmitting}
                onClick={submitForm}
              >
                Submit
              </Button>
            </form>
          );
        }}
      </Formik>
    </div>
  );
};

export default App;

为什么这样修复？ #

• 统一初始值类型后，TypeScript的类型错误会自动消失，因为address.country现在是ICountry | null，完全符合Autocomplete的value类型要求。
• getOptionSelected自定义匹配逻辑后，Autocomplete不再依赖对象引用判断匹配，而是通过唯一的iso字段来识别，即使初始值的对象和选项列表的对象不是同一个引用，也能正确匹配并选中对应的选项。

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