Javascript React error index.js:1452警告:数组或迭代器中的每个子级都应该有一个唯一的“key”属性
我试图在React中使用Mobx遍历一个商店。这是我的contact.jsxJavascript React error index.js:1452警告:数组或迭代器中的每个子级都应该有一个唯一的“key”属性,javascript,reactjs,mobx,Javascript,Reactjs,Mobx,我试图在React中使用Mobx遍历一个商店。这是我的contact.jsx import React, { Component } from 'react'; import Navbar from '../components/Navbar'; import Footer from '../components/Footer'; import Jumbotron from '../components/Jumbotron'; import {inject, observer} from 'mo
import React, { Component } from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
import Jumbotron from '../components/Jumbotron';
import {inject, observer} from 'mobx-react';
@inject('MemberStore')
@observer
class Contact extends Component {
handleSubmit = (e) => {
e.preventDefault();
const member = this.member.value;
const email = this.email.value;
// const email = this.email.value;
this.props.MemberStore.addMember({member, email});
this.member.value = '';
this.email.value = '';
}
render() {
const {MemberStore} = this.props;
return (
<div>
<Navbar />
<Jumbotron title="Contact Page" subtitle="You want to get in touch"/>
<div className="container">
<h2>You have {MemberStore.memberCount} members.</h2>
<form onSubmit={e => this.handleSubmit(e)}>
<input type="text" placeholder="Enter Your Name" ref={input => this.member = input }/>
<div>
<input type="text" placeholder= "Enter Your Email" ref={input => this.email = input }/>
</div>
<button>Submit</button>
</form>
<ul>
{MemberStore.members.map(({member, email}) => (
<li key={member}>
{member}
{email}
</li>
))}
</ul>
</div>
<Footer />
</div>
)
}
}
但是我没有把它包括在map函数中吗?任何帮助都将不胜感激。
下面是我的memberstore的代码
import {observable, action, computed} from 'mobx';
class MemberStore {
@observable members = [];
@action addMember({name, email}) {
const existing = this.members;
this.members = existing.concat({name,email});
}
@computed get memberCount() {
return this.members.length;
}
}
const store = new MemberStore();
export default store;
我不知道在member中会出现什么,它应该是相同的迭代行,所以尝试一下:
<ul>
{MemberStore.members.map(({member, email}, index) => (
<li key={index}>
{member}
{email}
</li>
))}
</ul>
您的成员数组存储具有两个属性的项目:名称和电子邮件。
在映射函数中,您正在使用解构{member,email}。成员项中没有成员属性。将成员更改为名称,并确保每个项都具有唯一的名称属性值(如果要将其用作键)
<ul>
{MemberStore.members.map(({ name, email }, i) => (
<li key={i}>
{name}
{email}
</li>
))}
</ul>
这可能是一个重复的问题。你们可能想看看这个,你们确定它引用的是那个代码吗?因为若成员不是唯一的,你们会得到一个稍微不同的错误。您是否在其他地方使用map?不幸的是,它仍然不起作用。它给了我一个空数组。我已经对映射函数{MemberStore.members.map{name,email},member=>{name}{email}执行了此操作@AltBrian尝试用我刚刚添加到答案中的代码替换您的代码。
<ul>
{MemberStore.members.map(({ name, email }, i) => (
<li key={i}>
{name}
{email}
</li>
))}
</ul>