props.names.map不是函数

Question

我有一个名为App的react组件，其中包含2个组件：Form和Table。而且它们都是受控组件。在表单中，有一个输入元素和一个按钮。输入元素具有onChange属性；每当值更改时，它都会更改应用程序状态中的值。该按钮具有由App组件提供的onClick属性；每当单击按钮时，状态的名字（数组）将被添加以名字的状态值。 问题是，当我单击按钮时，它将引发错误，提示我没有传递数组，并且它没有map方法，即使在回调中，更新后的状态的确显示了数组。下面是代码：

function Form(props) {
  return (
    <form>
      <label>
        Item: <input value={props.value} onChange={props.handleChange} />
      </label>
      <button onClick={props.handleClick}>Submit</button>
    </form>
  );
}

function Table(props) {
  let firstNames = props.names.map((item, index) => {
    return (
      <tr key={index}>
        <td>{item}</td>
      </tr>
    );
  });
  return (
    <table>
      <thead>
        <tr>
          <th>First Name</th>
        </tr>
      </thead>
      <tbody>{firstNames}</tbody>
    </table>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputField: "",
      firstNames: ["Joey", "Chloe"],
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  handleChange(event) {
    this.setState({ inputField: event.target.value });
  }
  handleClick() {
    this.setState(
      {
        firstNames: this.state.firstNames.push(this.state.inputField),
      },
      console.log(this.state.firstNames)
    );
  }
  render() {
    return (
      <div>
        <Form
          value={this.state.inputField}
          handleChange={this.handleChange}
          handleClick={this.handleClick}
        />
        <Table names={this.state.firstNames} />
      </div>
    );
  }
}

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

Answer 1

[push变异了原始数组，但它返回了更新后的数组的push，因此，在初始推动之后，您的length内部状态将是一个没有firstNames]的数字>

您不应该更改状态变量，而应该在添加新名称时创建一个新数组，例如，像这样：

map