我使用react-select
我從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}
/>
);
};
我認為問題與下拉列表有關,但我不知道如何設置它們的鍵值
您的數據似乎有一些重復的
value
條目。react-select
庫使用value
作為選項的鍵,因此它們必須是唯一的。