React react-select / 列表中的每个孩子都应该有一个唯一的“key”道具答案

【问题标题】：React react-select / Each child in a list should have a unique "key" propReact react-select / 列表中的每个孩子都应该有一个唯一的“key”道具
【发布时间】：2023-02-01 09:07:56
【问题描述】：

I use react-select I get nex warning from react Warning: Each child in a list should have a unique "key" prop.

My component:

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

I think the problem is related to the dropdown list, but I don't know how to set the key value for them

标签： reactjs typescript react-select

【解决方案1】：

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

【讨论】：