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

Question

I am creating a simple contact React app and I have created a link of for the name which will the go to a Show component.

However, when I click on the link it is saying {contactId: "undefined"} and {contact: undefined}

Below is my code for the Contact component.

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;

Not sure if the error is in this component or if it is in the Collections Component where it collects all the contacts?

Here is the data component which holds the data.

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;

The collections component renders all the data so I am not sure if the error is in this part this code.

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;

Once the link has been click it goes to a Show component and this the code in the Show.js component.

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;

Answer 1

It doesn't look like you are passing the id to the Contact component. It should be something like:

<Contact key={info.id} id={info.id} name={info.name} email={info.email} /> then you can use props.id in the component.

Also where is contactId defined or used?