数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。检查 `Abstractfactory` 的渲染方法

Posted 2023-02-22

【中文标题】数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。检查 `Abstractfactory` 的渲染方法

【英文标题】：Each child in an array or iterator should have a unique "key" prop. Check the render method of `Abstractfactory`

【发布时间】：2018-11-09 20:14:01

【问题描述】：

试图在一个简单的反应组件中呈现一些值我得到了这个错误

 Each child in an array or iterator should have a unique "key" prop. Check the render method of `Abstractfactory`. See react-warning-keys for more information.
    in div (created by Abstractfactory)
    in Abstractfactory


class Customer  
    public id: string;
    public firstName: string;
    public lastName: string;


export default Customer;

import * as React from 'react';
import  IAbstractFactoryProps  from "./IAbstractFactoryProps";  
import  IAbstractFactoryState  from "./IAbstractFactoryState";  
import styles from './Abstractfactory.module.scss';
import  escape  from '@microsoft/sp-lodash-subset';
import DaoFactory from "./DaoFactory";  
import ICustomerDao from "./ICustomerDao";  
import DataSources from "./DatasourcesEnum";

export default class Abstractfactory extends React.Component<IAbstractFactoryProps, IAbstractFactoryState> 
  //Private instance of customerDao, please note it returns ICustomerDao, an Interface,
    //not a concrete type
    private customerDao: ICustomerDao;

    constructor(props: IAbstractFactoryProps, state: IAbstractFactoryState) 
      super(props);
      this.setInitialState();

      // We set the Dao depending on the selected data source
      this.setDaos(props.datasource);

      //Then we set the list of customers and note, we dont care if they come from Sharepoint
      //Rest API or anything else.
      this.state = 
        items: this.customerDao.listCustomers(),
      ;
    

    public render(): React.ReactElement<IAbstractFactoryProps> 
      return (
        <div className= styles.abstractfactory >
          <div className= styles.container >
            <div className= styles.row >
              <div className= styles.column >
                  this.state.items.map( i => (<div>i.id</div>))
               </div>
            </div>
          </div>
        </div>
      );
    

    public setInitialState(): void 
      this.state = 
        items: []
      ;
    

    private setDaos(datasource: string): void 
      const data: DataSources = datasource === "Sharepoint" ? DataSources.SharepointList : DataSources.JsonData;
      this.customerDao = DaoFactory.getDAOFactory(data).getCustomerDAO();

      //Now, its transparent for us a UI developers what datasource was selected
      //this.customerDao.
    

【问题讨论】：

Understanding unique keys for array children in React.js的可能重复

【参考方案1】：

由于您正在映射 state.items，因此您输出的每个 <div> 标记都需要具有唯一的键属性，以便 React 可以在内部将它们区分开：

public render(): React.ReactElement<IAbstractFactoryProps> 
  return (
    <div className= styles.abstractfactory >
      <div className= styles.container >
        <div className= styles.row >
          <div className= styles.column >
              this.state.items.map( i => (<div key=i.id>i.id</div>))
           </div>
        </div>
      </div>
    </div>
  );

【讨论】：

所以每次有收藏时都需要这个？

是的，否则当一个或多个项目发生变化时，React 将不知道该怎么做，你可能会看到“跳舞”或其他奇怪的行为。如果您的数据没有内置标识符，您始终可以使用来自map 的数组索引。