為什么我的聯系人沒有呈現到我的主頁？

Question

我正在嘗試創建一個簡單的聯系人列表（又名 rolodex），用戶可以在其中創建新聯系人並重定向到呈現新聯系人的主頁。 現在我在 'this.setState({contacts: this.state.contacts.concat([contact]) });' 收到'無法讀取屬性聯系人'

任何幫助表示贊賞！

應用程序.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;

新的.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

主頁.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?

Answer 1

看起來像是“這個”的問題。 嘗試將“this”綁定到名為“addContact”的方法，就像您對方法“handleClick”所做的一樣。 更多細節為什么這是必要的（我不確定你是否需要，因為你在你的代碼中做了一些）請檢查https://reactjs.org/docs/handling-events.html

附： 問題的工作樣本總是有幫助的。 使用在線服務（如https://codesandbox.io/ ）非常容易。

Answer 2

我認為您需要使用聯系人數組中的元素鍵來訪問它。 {this.props.contacts[0]} 訪問 ID