Question

我正在尝试创建一个简单的联系人列表（又名rolodex），用户可以在其中创建一个新联系人并重定向到呈现新联系人的主页。现在，我在'this.setState（{contact：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?

Answer 1

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

ps。一个有效的问题样本总是有帮助的。使用https://codesandbox.io/之类的在线服务非常容易。

Answer 2

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

为什么我的联系人不显示在主页上？

2 个答案: