Question

我有以下两个组成部分App.js和PersonalInfo.js：

App.js

import React, { Component } from "react";
import "./styles.css";
import PersonalInfo from "./PersonalInfo";

class App extends Component {
  state = [{ fname: "Jonny", lname: "Deep" }, { fname: "test", lname: "test" }];

  inputChangeHandler = event => {
    this.setState({
      ...this.state,
      [event.target.name]: event.target.value
    });
  };

  render() {
    return (
      <div className="App">
        <PersonalInfo
          data={this.state}
          inputChangeHandler={this.inputChangeHandler}
        />
      </div>
    );
  }
}

export default App;

PersonalInfo.js

import React from "react";

const PersonalInfo = props => {
  const test = props.data.map((x, i) => {
    return (
      <div className="form-row align-items-center">
        <div className="col-sm-3 my-1">
          <label className="sr-only">First Name</label>
          <input
            type="text"
            className="form-control"
            id="inlineFormInputName"
            name="fname"
            value={x.fname}
            onChange={props.inputChangeHandler}
          />
        </div>
        <div className="col-sm-3 my-1">
          <label className="sr-only">Last Name</label>
          <div className="input-group">
            <input
              type="text"
              className="form-control"
              id="inlineFormInputGroupUsername"
              name="lname"
              value={x.lname}
              onChange={props.inputChangeHandler}
            />
          </div>
        </div>

        <div className="col-auto my-1">
          <button type="submit" className="btn btn-primary">
            Add
          </button>
          <button type="submit" className="btn btn-danger">
            Remove
          </button>
        </div>
      </div>
    );
  });
  return (
    <div className="container">
      <form>{test}</form>
      <pre>{JSON.stringify(props, null, 2)}</pre>
    </div>
  );
};

export default PersonalInfo;

使用上面的代码，当我在输入字段中键入内容时，出现 props.data.map不是函数的错误。如果我注释掉或删除了onChange={props.inputChangeHandler}，它将起作用。但是onChange要更新状态。

如何清除错误并使之正常工作？

这是沙盒链接：https://codesandbox.io/s/sharp-leakey-ub859?file=/src/App.js

Answer 1

您的inputChangeHandler错误，您使用对象更新了数组。因此，当您调用它时，数组就变成了这样的{key：value}对象。

要实现您的目标，您需要一个唯一的ID，以轻松地在数组中查找数据，然后需要修改此数组：

state = [{ id: 1, fname: "Jonny", lname: "Deep" }, { id: 2, fname: "test", lname: "test" }]

inputChangeHandler = (event, id) => {
  this.setState((prev) => {
    const indexOfName = prev.findIndex(x => x.id === id);
    prev[indexOfName][event.target.name] = event.target.value;
    return prev;
  })
}

您还需要更改其调用方式：

          <input
            type="text"
            className="form-control"
            id="inlineFormInputName"
            name="fname"
            value={x.fname}
            onChange={(event) => props.inputChangeHandler(event, x.id)}
          />

我使用索引而不是id制作了一个小型工作示例：https://codesandbox.io/embed/nifty-napier-ps86v?fontsize=14&hidenavigation=1&theme=dark

来自地图函数内部道具的访问方法

1 个答案: