React Mui Autocomplete出现重复key警告，如何添加key？

你遇到的"Encountered two children with the same key"警告，根源在于当前代码把cityObj转成了纯字符串数组（只保留option.name），而Autocomplete默认会用选项本身作为key。如果存在同名城市，就会出现重复key的情况。

最优解决方案：直接传入原始对象数组 #

不要将options处理为纯字符串数组，直接传递cityObj，并通过getOptionLabel指定要显示的文本为城市名称，同时利用对象的唯一标识（比如id）作为key：

<Stack spacing={2} sx={{ width: 300 }}>
  <Autocomplete
    id="free-solo-demo"
    freeSolo
    options={cityObj} // 直接传递原始对象数组
    getOptionLabel={(option) => option.name} // 指定显示的文本内容
    renderInput={(params) => (
      <TextField
        {...params}
        error={weatherData?.error ? true : false}
        fullWidth
        label="name your city here..."
        value={search}
        onChange={(e) => {
          setSearch(e.target.value);
        }}
        ref={inputField}
        onKeyDown={(e) => e.key === "Enter" && handleSubmit(e)}
      />
    )}
  />
</Stack>

备选方案：手动生成唯一key（若必须用自定义结构） #

如果业务场景要求必须对选项做转换，可以给每个选项添加唯一标识，比如结合索引或其他唯一属性：

<Stack spacing={2} sx={{ width: 300 }}>
  <Autocomplete
    id="free-solo-demo"
    freeSolo
    options={cityObj.map((option, index) => ({
      name: option.name,
      uniqueKey: `${option.name}-${index}` // 生成唯一标识
    }))}
    getOptionLabel={(option) => option.name}
    renderInput={(params) => (
      <TextField
        {...params}
        error={weatherData?.error ? true : false}
        fullWidth
        label="name your city here..."
        value={search}
        onChange={(e) => {
          setSearch(e.target.value);
        }}
        ref={inputField}
        onKeyDown={(e) => e.key === "Enter" && handleSubmit(e)}
      />
    )}
  />
</Stack>

这样Autocomplete会基于每个选项对象的唯一性来生成key，避免重复警告。

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