Javascript 为什么不'；我的联系人是否无法呈现到我的主页？

我正在尝试创建一个简单的联系人列表（又名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;

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“/New”导入新内容；
从“/Home”导入主页；
从“/Contact”导入联系人；
从“react router dom”导入{BrowserRouter，Switch，Route}；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
联系人：[]
};
}
添加联系人（联系人）{
this.setState（{contacts:this.state.contacts.concat（[contact]）}）；
}
render（）{
返回(
}
/>
}
/>
}
/>
);
}
}
导出默认应用程序；

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

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{Link}；
//从“道具类型”导入道具类型；
类新扩展了React.Component{
构造函数（）{
超级（）；
此.state={
姓名：“，
图像url:“”，
电邮：“，
电话号码：“
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
const generateId=（）=>Math.round（Math.random（）*100000000）；
常数触点={
id:generateId（），
名称：this.state.name，
image\u url:this.state.image\u url，
电子邮件：this.state.email，
电话号码：this.state.phone\u号码
};
this.props.addContact（contact）；
}
render（）{
返回(
新联系人信息
this.setState（{name:event.target.value}）
占位符=“联系人姓名”
/>
this.setState（{image\u url:event.target.value}）
占位符=“照片Url”
/>
this.setState（{email:event.target.value}）
占位符=“电子邮件地址”
/>
this.setState（{phone_number:event.target.value}）
}
占位符=“电话号码”
/>
提交新联系人
);
}
}
//Home.propTypes={
//名称：React.PropTypes.string，
//image\u url:React.PropTypes.string，
//电子邮件：React.PropTypes.string，
//电话号码：React.PropTypes.number
// };
导出新的默认值；
//抓取输入字段并更改新联系人的状态，然后将其推送到联系人列表的状态。
//道具类型验证字段

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?

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{Link}；
从“/New”导入新内容；
类Home扩展了React.Component{
render（）{
const{contacts}=this.props；
返回(
联系人名单
{this.props.contacts}
添加新联系人
联系人ID
);
}
}
导出默认主页；
//将id键映射到个人联系人？

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

---

注：问题的工作样本总是有帮助的。使用在线服务非常简单。

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