reactjs - React react-select/列表中的每个子元素都应有一个唯一的 "key" 属性

我使用 react-select 时，收到来自 React 的以下警告 Warning: Each child in a list should have a unique "key" prop.

我的组件：

import React from "react";
import Select from "react-select";

import styles from "./Filter.module.scss";

interface SearchBarProps {
  setParametr: React.Dispatch<React.SetStateAction<string>>;
  data: Array<{ name: string; value: number }>;
  placeholder: string;
}

export const SearchBar: React.FC<SearchBarProps> = (props) => {
  // const [options, setOptions] = React.useState([]);

  const changeValue = (event: { name: string; value: number } | null) => {
    props.setParametr(event?.name || "");
  };

  return (
    <Select
      className={styles.input}
      placeholder={props.placeholder}
      onChange={(event) => changeValue(event)}
      getOptionLabel={(option) => {
        return option.name;
      }}
      getOptionValue={(option) => {
        return option.value.toString();
      }}
      options={props.data}
    />
  );
};

我认为问题与下拉列表有关，但我不知道如何为它们设置键值

答案＃1

看起来你的数据中有一些重复的 value 条目。react-select 库使用 value 作为选项的键，因此它们需要是唯一的。