我正在创建一个简单的联系人 React 应用程序，并且我已经为名称创建了一个链接，该链接将转到 Show 组件。

但是，当我点击链接时，它会显示 {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: '[email protected]',},
{ id: 2, name: 'katy patterson', email: '[email protected]',},
{ id: 3, name: 'petra verkaik', email: '[email protected]',}
];

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='[email protected]' />
          <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.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;