试图在一个简单的react组件中呈现一些值时,我遇到了这个错误
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.
}
}
因为您正在映射状态。项目,每个
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 JS组件中的关键道具有问题。 我正在得到 警告:数组或迭代器中的每个子级都应具有唯一的“键”属性。检查登录的呈现方法。从应用程序中传递了一个孩子。 控制台日志中的警告。应用程序组件如下: 我的登录组件如下: 我对React还是个新手,我不确定我应该像钥匙一样传递什么,在哪里传递? 使现代化 LoginForm组件: 路由文件: 主页组件
我完全糊涂了,因为我的控制台有错误,我阅读了reactjs文档和有关stackoverflow的所有提示,但我无法理解问题是什么。我看到了书的标题列表({item.volumeInfo.title}),但控制台有错误。 这是我的密码: 这是API响应的一部分: 我试着做下一个键: key={item.etag}, key={i}, key={item.volumenfo.title} 但错误仍然存
我收到3条警告: 警告:数组或迭代器中的每个子节点都应该在ModalBody的div(由ModalBody创建)中的表中具有唯一的key prop。 警告:数组或迭代器中的每个孩子都应该有一个唯一的"key"prop. in tr in thead in table 警告:数组或迭代器中的每个子节点都应该有一个唯一的"key"prop. in tr in tbody in table 我有一个函数
我用ReactNative为iOS和android构建了一个应用程序,它具有。使用有效数据源填充listview时,屏幕底部会显示以下警告: 警告:数组或迭代器中的每个子级都应具有唯一的“键”属性。检查
我对reatjs非常陌生,我试图将数据发布到url,但收到RequestNotFound 500错误,我使用调试器看到了这一点 警告:数组或迭代器中的每个子级都应该有一个唯一的“键”道具。检查的渲染方法。 请帮我摆脱这一切 我正在从url获取数据,但我无法发布数据 请检查它,并更正我的代码与解释
但这是错误的: 我不知道如何插入“钥匙”
我是新手,我正在编写一个包含卡片的应用程序平面列表,但我发现这个错误,这是我的代码 但是我得到警告:列表中的每个孩子都应该有一个独特的“钥匙”道具。有关更多信息,请参见https://fb. me/react-warge-key。%s, 我做错了什么?
我试图显示一个从服务器获取数据并显示其中所有信息的表。代码正在从获取的API打印我的表标题和第一个对象的信息。 这给了我一个错误。 警告:数组或迭代器中的每个子级都应具有唯一的“键”属性。检查的渲染方法