Question

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

但是，当我单击链接时，它说的是{contactId: "undefined"}和{contact: undefined}

下面是我的Contact组件代码。

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;

Answer 1

您似乎没有将id传递到Contact组件。应该是这样的：

<Contact key={info.id} id={info.id} name={info.name} email={info.email} />，然后您就可以在组件中使用props.id。

contactId还在哪里定义或使用？

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

1 个答案: