reactjs - React react-select/Varje barn i en lista bör ha en unik "key"-prop

Jag använder react-select och får följande varning från React Warning: Each child in a list should have a unique "key" prop.

Min komponent:

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}
    />
  );
};

Jag tror att problemet är relaterat till rullgardinslistan, men jag vet inte hur man ställer in nyckelvärdet för dem

Svar #1

Det verkar som att dina data har några upprepande value-poster. react-select-biblioteket använder value som nycklar för alternativen, så de måste vara unika.