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

【问题标题】：Two children with the same key in React componentReact 组件中具有相同键的两个孩子
【发布时间】：2020-09-16 04:55:28
【问题描述】：

我知道这个问题也有类似的问题，(1)、(2) 都试过了，但对我的情况没有用。

在道具上有一个对象数组：

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。键应该是唯一的，以便组件保持他们在更新中的身份。非唯一键可能会导致儿童被复制和/或省略——该行为不受支持并且可以在未来的版本中进行更改。

不知道ellipsisItem是什么意思，那个变量不在项目中。

我已经阅读了其他问题的答案，应该使用索引而不是元素。所以我把它改成：

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

【问题讨论】：

对我来说，创建ellipsisItem 键的任何东西都存在问题。您是否尝试过寻找它的来源？
嗨！您没有在 React 组件中实际呈现列表的位置显示代码。你能做到吗？
我搜索了那个变量，但它没有出现在结果中。它不在项目中
@nicoqh，已更新
下拉组件是你自己的还是来自某个库？

标签： javascript arrays reactjs

【解决方案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>
  );
}

查看以下代码沙盒

https://codesandbox.io/s/material-ui-dropdown-yybhq

希望对你有帮助

【讨论】：