javascript - 为什么对象数组的映射在我的 react 表组件中不起作用？

Question

下面是我正在处理的代码和 click here获取codesandbox链接。

import React from "react";
import ReactDOM from "react-dom";

class PhoneBookForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: "",
      lastName: "",
      phoneNo: ""
    };
  }
  onChange = event => {
    this.setState({ [event.target.name]: event.target.value }, () => {
      console.log(this.state);
    });
  };

  onSubmit = () => {
    console.log("called");
    this.props.appendToList({
      firstName: this.state.firstName,
      lastName: this.state.lastName,
      phoneNO: this.state.phoneNo
    });
  };

  render() {
    return (
      <div>
        <label>First Name:</label>
        <input type="text" name="firstName" onChange={this.onChange} />
        <br />
        <label>Last Name:</label>
        <input type="text" name="lastName" onChange={this.onChange} />
        <br />
        <label>Phone Number:</label>
        <input type="text" name="phoneNo" onChange={this.onChange} />
        <br />
        <button onClick={this.onSubmit}>Submit</button> <br />
        <br />
      </div>
    );
  }
}

function InformationTable(props) {
  console.log("props info", props.peoples);
  return (
    <table>
      <thead>
        <th style={{ border: "solid 1px" }}>First Name</th>
        <th style={{ border: "solid 1px" }}>Last Name</th>
        <th style={{ border: "solid 1px" }}>Phone No</th>
      </thead>
      {props.peoples.map(person => {
        return (
          <tr key={person.phoneNo}>
            <td>{person.firstName}</td>
            <td>{person.lastName}</td>
            <td>{person.phoneNo}</td>
          </tr>
        );
      })}
    </table>
  );
}

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listOfPeople: [{}]
    };
  }

  appendToList(people) {
    console.log("called2");
    // let peoples = this.state.listOfPeople.push(people);
    console.log("people", people);
    this.setState({ listOfPeople: people }, () => {
      console.log(this.state.listOfPeople);
    });
  }

  render = () => {
    return (
      <section>
        <PhoneBookForm appendToList={this.appendToList.bind(this)} />
        <InformationTable peoples={this.state.listOfPeople} />
      </section>
    );
  };
}

ReactDOM.render(<Application />, document.getElementById("root"));

正如您在上面看到的，每当我尝试点击提交按钮时，InformationTable 组件都不会呈现。您也可以在codesandbox 上尝试一下。一旦您单击该提交按钮，控制台中就会提示您一条错误消息，内容为信息表组件中发生上述错误，并且显示的是空白页面，而不是我正在显示的结果寻找。

但是，如果我从组件中删除下面的整行，那么它的行为就会正常

{props.peoples.map(person => {
        return (
          <tr key={person.phoneNo}>
            <td>{person.firstName}</td>
            <td>{person.lastName}</td>
            <td>{person.phoneNo}</td>
          </tr>
        );
      })}

我还像这样 console.log("props info", props.peoples); 控制台记录了上面的内容，以验证对象是否有数据。我想我错过了一个非常微小的细节，我现在无法弄清楚。

Answer 1

这是代码修复

appendToList(people) {
    console.log("called2");
    // let peoples = this.state.listOfPeople.push(people);
    console.log("people", people);
    // this.setState(prevState => {
    //   listOfPeople: prevState.listOfPeople.concat(people);
    // });
    this.setState({ listOfPeople: this.state.listOfPeople.concat(people) }, () => {
      console.log(this.state.listOfPeople);
    });
  }