Javascript 为什么react的my table组件中的对象数组映射不起作用？

下面是我正在处理的代码和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上尝试自己。只要你点击submit按钮，控制台就会提示你一条错误消息，上面的错误发生在InformationTable组件中，显示的是空白页面，而不是我想要的结果

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

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

我也在上面登录了控制台，比如console.logprops-info，props.peoples；验证对象是否有数据。我想我遗漏了一个很小的细节，我现在还不能弄清楚。

这是代码修复

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);
    });
  }

这是代码修复

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);
    });
  }

---

我不知道这是否重要，但这是打字错误吗？NO代替NO=phoneNO:this.state。phoneNo@Nikki9696即使纠正了打字错误，错误仍然存在。你可以在上面的codesandbox链接中查看它。我发布了一个答案，但因为我不是一个反应型的人，所以我认为Nilesh的可能更好，并删除了它。不管是哪种方式，问题是你在附加一个对象，而不是一个数组，所以映射是未定义的。我不知道这是否重要，但这是一个打字错误吗？NO代替NO=phoneNO:this.state。phoneNo@Nikki9696即使纠正了打字错误，错误仍然存在。你可以在上面的codesandbox链接中查看它。我发布了一个答案，但因为我不是一个反应型的人，所以我认为Nilesh的可能更好，并删除了它。不管是哪种方式，问题是您正在附加一个对象，而不是一个数组，所以map是未定义的。