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

Posted 2023-02-27

[我知道有与此类似的问题，我已经尝试过(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

UPDATE我还在添加它的渲染位置。

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

答案

不确定问题出在哪里。但是，我使用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

希望这会有所帮助