Я пытаюсь создать простой список контактов (он же rolodex), где пользователь может создать новый контакт и перенаправиться на домашнюю страницу, которая отображает новый контакт. Прямо сейчас я получаю сообщение «не могу прочитать контакты свойств» в этом this.setState ({contacts: this.state.contacts.concat ([contact])}); ‘

Любая помощь приветствуется!

App.js

import React, { Component } from "react"; import ReactDOM from "react-dom"; import New from "./new"; import Home from "./home"; import Contact from "./contact"; import { BrowserRouter, Switch, Route } from "react-router-dom"; class App extends React.Component { constructor() { super(); this.state = { contacts: [] }; } addContact(contact) { this.setState({ contacts: this.state.contacts.concat([contact]) }); } render() { return ( {amp}lt;BrowserRouter{amp}gt; {amp}lt;div{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route exact path="/newcontact" render={() ={amp}gt; {amp}lt;New addContact={this.addContact} /{amp}gt;} /{amp}gt; {amp}lt;Route exact path="/home" render={() ={amp}gt; {amp}lt;Home contacts={this.state.contacts} /{amp}gt;} /{amp}gt; {amp}lt;Route path="/contact" render={() ={amp}gt; {amp}lt;Contact contacts={this.state.contacts} /{amp}gt;} /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/BrowserRouter{amp}gt; ); } } export default App; 

New.js

 import React from "react"; import ReactDOM from "react-dom"; import { Link } from "react-router-dom"; // import PropTypes from "prop-types"; class New extends React.Component { constructor() { super(); this.state = { name: "", image_url: "", email: "", phone_number: "" }; this.handleClick = this.handleClick.bind(this); } handleClick() { const generateId = () ={amp}gt; Math.round(Math.random() * 100000000); const contact = { id: generateId(), name: this.state.name, image_url: this.state.image_url, email: this.state.email, phone_number: this.state.phone_number }; this.props.addContact(contact); } render() { return ( {amp}lt;div{amp}gt; {amp}lt;h1{amp}gt;New Contact info{amp}lt;/h1{amp}gt; {amp}lt;form name="newContact"{amp}gt; {amp}lt;input name="name" value={this.state.name} onChange={event ={amp}gt; this.setState({ name: event.target.value })} placeholder="Contact Name" /{amp}gt; {amp}lt;input name="image_url" value={this.state.image_url} onChange={event ={amp}gt; this.setState({ image_url: event.target.value })} placeholder="Photo Url" /{amp}gt; {amp}lt;input name="email" value={this.state.email} onChange={event ={amp}gt; this.setState({ email: event.target.value })} placeholder="Email Address" /{amp}gt; {amp}lt;input name="phone_number" value={this.state.phone_number} onChange={event ={amp}gt; this.setState({ phone_number: event.target.value }) } placeholder="Phone Number" /{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;Link to={`/home`}{amp}gt; {amp}lt;button onClick={this.handleClick}{amp}gt;Submit New Contact{amp}lt;/button{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;/div{amp}gt; ); } } // Home.propTypes = { // name: React.PropTypes.string, // image_url: React.PropTypes.string, // email: React.PropTypes.string, // phone_number: React.PropTypes.number // }; export default New; //grab input fields and change new contact's state, then push that to contacts list's state. //prop types validate fields 

home.js

 import React from "react"; import ReactDOM from "react-dom"; import { Link } from "react-router-dom"; import New from "./new"; class Home extends React.Component { render() { const { contacts } = this.props; return ( {amp}lt;div{amp}gt; {amp}lt;h1{amp}gt;Contact List{amp}lt;/h1{amp}gt; {amp}lt;div{amp}gt;{this.props.contacts}{amp}lt;/div{amp}gt; {amp}lt;Link to={`/newcontact`}{amp}gt; {amp}lt;button{amp}gt;Add New Contact{amp}lt;/button{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;Link to={`/contact`}{amp}gt; {amp}lt;button{amp}gt;Contact ID{amp}lt;/button{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;/div{amp}gt; ); } } export default Home; //map id key to individual contact? 
Hudson2693

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Похоже, вопрос «это». Попробуйте связать this с методом с именем addContact, как то, что вы сделали с методом handleClick. Более подробно, почему это необходимо (я не уверен, что вам нужно, так как вы сделали это в своем коде), пожалуйста, проверьте https://reactjs.org/docs/handling-events.html

пс. Рабочий образец проблемы всегда помогает. Это довольно просто, используя онлайн-сервис, такой как https://codesandbox.io/ .

Я думаю, что вам нужно использовать ключи элементов в массиве контактов для доступа к нему. {this.props.contacts [0]} для доступа к идентификатору

EZE STANLEY

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,