我正在创建一个简单的联系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;
答案 0 :(得分:1)
您似乎没有将id
传递到Contact
组件。应该是这样的:
<Contact key={info.id} id={info.id} name={info.name} email={info.email} />
,然后您就可以在组件中使用props.id
。
contactId
还在哪里定义或使用?