无法读取React中未定义错误的属性“name”

然而,当我点击链接时,它说 {contactId: "undefined"} {contact: undefined}

下面是我的联系人组件代码。

import React from 'react';

import { Link } from 'react-router';

const Contact = props =>
<div className= 'pure-u-1-3'>
    <h1>
        <Link to={`/contacts/${props.id}`}>
        {props.name}
        </Link>
    </h1>
    <h2>{props.email}</h2>

 </div>;

 export default Contact;

下面是保存数据的数据组件。

const data = [
{ id: 1, name: 'brian patterson', email: 'brian@hotmail.com',},
{ id: 2, name: 'katy patterson', email: 'katy@hotmail.com',},
{ id: 3, name: 'petra verkaik', email: 'petra@hotmail.com',}
];

export default data;

import React from 'react';
import Contact from './Contact';
import data from './data';
import './Collection.css';




 class Layout extends React.Component {
 componentWillMount() {
    this.setState({
        contacts: data,
    });
}

addContact = (e) => {
    e.preventDefault();
    const contacts = this.state.contacts;
    const newId = contacts[contacts.length - 1].id + 1
    this.setState({
        contacts: contacts.concat({ id: newId, name: this.refs.name.value, email: this.refs.email.value }),
    });
    console.log('clicked!!');
    this.refs.name.value = null;
    this.refs.email.value = null;
}
newContact = () =>
<div className= 'pure-g'>
<div className='pure-u-12-24'> 
  <form className='pure-form' onSubmit={this.addContact}>
      <fieldset>

          <legend>New Contact</legend>

          <input ref='email' type="email" placeholder='example@example.com' />
          <input ref='name' type="text" placeholder='Name' />
          <button type="submit" class="pure-button pure-button-   primary">Add</button>
      </fieldset>
  </form>
  </div>
 </div>;
   render() {
    return (
    <div id='Collection'>
     {this.newContact()}
        <div className='pure-g'>
          {this.state.contacts.map(info =>
            <Contact key={info.id} name={info.name} email={info.email} />
            )}
        </div>
    </div>
    );
  }
}

export default Layout;

一旦链接被点击,它就会转到一个Show组件,这将显示Show.js组件中的代码。

import React from 'react';


import data from './data';

 class Show extends React.Component {
  componentWillMount() {
    console.log(this.props.params);
    this.setState({
     contact: data.filter(c => c.id === parseInt(this.props.params.contactId,    10))[0],
    });
   }
   render() {
    console.log(this.state)
    return (
    <div id='Show'>
      <h1>{this.state.contact.name}</h1>
    </div>

    );
   }
  }

export default Show;