为什么我的联系人没有呈现到我的主页？答案

【问题标题】：Why aren't my contacts rendering to my home page?为什么我的联系人没有呈现到我的主页？
【发布时间】：2019-12-26 01:56:55
【问题描述】：

我正在尝试创建一个简单的联系人列表（又名 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 (
      <BrowserRouter>
        <div>
          <Switch>
            <Route
              exact
              path="/newcontact"
              render={() => <New addContact={this.addContact} />}
            />
            <Route
              exact
              path="/home"
              render={() => <Home contacts={this.state.contacts} />}
            />

            <Route
              path="/contact"
              render={() => <Contact contacts={this.state.contacts} />}
            />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

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 = () => 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 (
      <div>
        <h1>New Contact info</h1>
        <form name="newContact">
          <input
            name="name"
            value={this.state.name}
            onChange={event => this.setState({ name: event.target.value })}
            placeholder="Contact Name"
          />
          <input
            name="image_url"
            value={this.state.image_url}
            onChange={event => this.setState({ image_url: event.target.value })}
            placeholder="Photo Url"
          />
          <input
            name="email"
            value={this.state.email}
            onChange={event => this.setState({ email: event.target.value })}
            placeholder="Email Address"
          />
          <input
            name="phone_number"
            value={this.state.phone_number}
            onChange={event =>
              this.setState({ phone_number: event.target.value })
            }
            placeholder="Phone Number"
          />
        </form>

        <Link to={`/home`}>
          <button onClick={this.handleClick}>Submit New Contact</button>
        </Link>
      </div>
    );
  }
}

// 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 (
      <div>
        <h1>Contact List</h1>
        <div>{this.props.contacts}</div>

        <Link to={`/newcontact`}>
          <button>Add New Contact</button>
        </Link>

        <Link to={`/contact`}>
          <button>Contact ID</button>
        </Link>
      </div>
    );
  }
}

export default Home;
//map id key to individual contact?

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

看起来像是'this'的问题。尝试将“this”绑定到名为“addContact”的方法，就像对方法“handleClick”所做的那样。更多细节为什么这是必要的（我不确定你是否需要，因为你在你的代码中做了一些）请检查https://reactjs.org/docs/handling-events.html

ps。该问题的工作样本总是有帮助的。使用https://codesandbox.io/等在线服务非常简单。

【讨论】：

【解决方案2】：

我认为您需要使用联系人数组中的元素键来访问它。 {this.props.contacts[0]} 访问 ID

【讨论】：