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

Posted 2023-02-22

【中文标题】如何在数组中设置特定对象的状态

【英文标题】：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: "[e-mail]" ,
       isChecked: false, name: "Ali", age: 19, email: "[e-mail]" ,
       isChecked: false, name: "Saad", age: 16, email: "[e-mail]" ,
       isChecked: false, name: "Asad", age: 25, email: "[e-mail]" 
    ]
  ;

这是我的 toggleCheckHandler 函数

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

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

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

【参考方案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
    );
;