React error index.js: 1452 Предупреждение: у каждого дочернего элемента в массиве или итераторе должен быть уникальный ключ - PullRequest
Новая
       9

React error index.js: 1452 Предупреждение: у каждого дочернего элемента в массиве или итераторе должен быть уникальный ключ

0 голосов
/ 01 декабря 2018

Я пытаюсь перебрать магазин, используя Mobx в React.Вот мой 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 '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>
    )
  }
 }

экспорт по умолчанию Контакт;

Теперь он только возвращает письмо, и я получаю следующую ошибку. 

index.js:1452 Warning: Each child in an array or iterator should have a unique "key" prop.

Но разве я не включил это в функцию карты?Любая помощь будет оценена.Ниже приведен код моего склада членов. 

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;

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018

В вашем массиве members хранятся элементы с двумя свойствами: name и email.В вашей функции карты вы используете деструктурирование ({member, email}).В элементе members нет свойства member.Измените member на name (и убедитесь, что у каждого элемента есть уникальное значение для свойства name, если вы хотите использовать его в качестве ключа).

  <ul>
    {MemberStore.members.map(({ name, email }, i) => (
      <li key={i}>
        {name}
        {email}
      </li>
    ))}
  </ul>
0 голосов
/ 01 декабря 2018

Я не знаю, что будет в member, оно должно быть одинаковым для всех повторяющихся строк, поэтому попробуйте: 

<ul>
  {MemberStore.members.map(({member, email}, index) => (
     <li key={index}>
        {member}
        {email}
     </li>
  ))}
</ul>
...