React组件中具有相同键的两个子组件

Question

this.props.items = [ { name: 'a', price: 10},
                     { name: 'b', price: 20},
                     { name: 'c', price: 10},
                     { name: 'd', price: 30},
                   ];

我想创建一个包含所有价格选项的列表，并将唯一的值放在下拉列表中，所以我这样做：

  const priceOptions = [{ text: '', value: '' }];

  const prices = [
    ...new Set(this.props.items.map(item => item.price)),
  ];
  prices.forEach(price => {
    if (price) {
      priceOptions.push({
        key: price,
        text: price,
        value: price,
      });
    }

此代码引发错误：

警告：遇到具有相同键ellipsisitem-nan的两个子项。键应该是唯一的，以便组件在更新时维护它们的标识。非唯一键可能导致重复和/或省略子键-此行为不受支持，并且可能在未来版本中更改。

  const prices = [
    ...new Set(this.props.items.map(item => item.price)),
  ];
  prices.forEach((price, index) => {
    if (price) {
      priceOptions.push({
        key: index,
        text: price,
        value: price,
      });
    }
  });

从10,20,10,30到10,20,30

更新我也添加到它呈现的地方。

return (
  <Layout>
     ...
     <Dropdown
        placeholder="Price"
        onChange={this.searchHandlerPrice}
        options={priceOptions}
     />

和SearchHandlerPrice：

  searchHandlerPrice = (event, data) => {
    const { getItems } = this.props;
    geItems({
      name: this.props.query.name,
      price: data.value,
    });
  };

import React from 'react';
import { Dropdown } from 'semantic-ui-react';

import './Dropdown.styles.scss';

export default ({placeholder, options, onChange}) => {
    return (
        <Dropdown className="hello-dropdown"
            placeholder={placeholder}
            search
            selection
            options={options}
            onChange={onChange}
            clearable
        />
    );
};

Answer 1

不确定问题出在哪里。然而，我使用MATERIAL UI的SELECT标记重新创建了这个问题，一切似乎都很好。

在app.js中

class App extends React.Component {
  items = [
    { name: "a", price: 10 },
    { name: "b", price: 20 },
    { name: "c", price: 10 },
    { name: "d", price: 30 }
  ];

  render() {
    return (
      <div className="App">
        <Select items={this.items} />
      </div>
    );
  }
}

export default App;

在select.js中

export default function SelectForm(props) {
  const classes = useStyles();
  const [price, setPrice] = React.useState("");
  const [uniquePrice, setUniquePrice] = React.useState([]);

  React.useEffect(() => {
    const newPrice = [...new Set(props.items.map(item => item.price))];
    setUniquePrice(newPrice);
  }, [props]);

  const handleChange = event => {
    setPrice(event.target.value);
  };

  return (
    <div className="App">
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Price List</InputLabel>
        <Select value={price} onChange={handleChange}>
          {uniquePrice.map(price => (
            <MenuItem key={price} value={price}>
              {price}
            </MenuItem>
          ))}
        </Select>
        <p>Selected Value: {price}</p>
      </FormControl>
    </div>
  );
}