如何在数组中设置特定对象的状态答案

【问题标题】：How to set state of a specific object in array如何在数组中设置特定对象的状态
【发布时间】：2020-04-29 00:00:50
【问题描述】：

我有一个数组中的对象列表，其中包含用户值。我想根据用户选择更改特定对象。更具体地说，我有一个表，对于每个用户，都有一个属性 ischecked，默认为 false。我希望当用户单击复选框时，isChecked 属性更改为 true。

这是显示表格数据的函数。

// Display Table Data
  renderTableData = () => {
    return this.state.students.map((student, index) => {
      const { isChecked, name, age, email } = student; //destructuring
      return (
        <tr className={classes.tableRow} key={index}>
          <td className={classes.tableDataSpecial}>
            <div className={classes.content}>
              {" "}
              <input
                type="checkbox"
                checked={isChecked}
                onChange={this.toggleCheckHandler}
              />
            </div>
          </td>
          <td className={classes.tableData}>{name}</td>
          <td className={classes.tableData}>{age}</td>
          <td className={classes.tableData}>{email}</td>
        </tr>
      );
    });
  };

这是我的状态

 state = {

    students: [
      { isChecked: false, name: "Wasif", age: 21, email: "wasif@email.com" },
      { isChecked: false, name: "Ali", age: 19, email: "ali@email.com" },
      { isChecked: false, name: "Saad", age: 16, email: "saad@email.com" },
      { isChecked: false, name: "Asad", age: 25, email: "asad@email.com" }
    ]
  };

这是我的 toggleCheckHandler 函数

toggleCheckHandler = e => {
    console.log(e.target);
  };

e.target 给了我 DOM 内容。那么如何定位该特定对象。

例如，我想将 Wasif 的 isChecked 设置为 true，我该怎么做？

【问题讨论】：

标签： arrays reactjs object state

【解决方案1】：

您还可以传递与特定学生相关的任何数据（整个“学生”对象、电子邮件或该学生的 ID）。像这样的：

const { isChecked, name, age, email } = student; //destructuring
return (
  ...
  <input
    type="checkbox"
    checked={isChecked}
    onChange={()=>this.toggleCheckHandler(email)}
  />
  ...
)

toggleCheckHandler = email => {
 console.log(email); // or id
};

然后您可以通过电子邮件（或 id）轻松找到数组中的对象。

【讨论】：

那行得通。谢谢，但是有没有更有效的解决方案？最终，我将拥有大量数据。
如果您安装 Formik 或 react-form-hooks 之类的表单管理器，您会做得更好。它通过字段数组和验证轻松管理状态。
正如我已经提到的，您可以为每个用户定义一个唯一的 ID。并对任何其他数据集使用类似的方法：用户、教师、日程安排等等。我不知道您将如何准确定义 ID，如何存储它等，但是，例如，您可以使用如下内容：{id: 'student093432987'}, {id: 'teacher2554154'}, .. . 无需附加到 DOM 事件中。

【解决方案2】：

您可以使用回调函数的index 参数。这可能类似于：

// Display Table Data
  renderTableData = () => {
    return this.state.students.map((student, index) => {
      const { isChecked, name, age, email } = student; //destructuring
      return (
        <tr className={classes.tableRow} key={index}>
          <td className={classes.tableDataSpecial}>
            <div className={classes.content}>
              {" "}
              <input
                type="checkbox"
                checked={isChecked}
                onChange={() => this.toggleCheckHandler(index)}
              />
            </div>
          </td>
          <td className={classes.tableData}>{name}</td>
          <td className={classes.tableData}>{age}</td>
          <td className={classes.tableData}>{email}</td>
        </tr>
      );
    });
  };

toggleCheckHandler = (index) => {
    const students = this.state.students;
    students[index].isChecked = !students[index].isChecked;
    this.setState({
        students: students
    });
};

【讨论】：