reactjs中如何管理每一行的state？

Question

我正在将数据库中的数据映射到 html 表中，其中每个行都有一个切换按钮来标记它们是否不存在。 但是我不确定如何保存每行切换按钮的 state，因为它们都会有所不同。

function Component() {
  const [students, setStudents] = useState([]);
  const [absent, setAbsent] = useState(false);
  const updateAbsent = () => {
    console.log(absent);
  };

  return (
    <div className="attendance-today-container">
      <h1>Daily attendance</h1>
      <table ref={table}>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Absent?</th>
        </tr>
        {students.map((student, i) => {
          return (
            <tr>
              <td key={i}>{student.firstName}</td>
              <td>{student.lastName}</td>
              <td>
                <label class="switch">
                  <input
                    type="checkbox"
                    onClick={() => {
                      setAbsent(!absent);
                    }}
                  />
                  <span class="slider round"></span>
                </label>
              </td>
            </tr>
          );
        })}
      </table>
      <button onClick={updateAbsent}>Send</button>
    </div>
  );
}

Answer 1

一种简单的方法是存储学生数据，以及它们是否存在于同一个 state 中。

每个学生都可以有一个 id，以便轻松识别他。 function 可以通过学生 state 数组的 go 并识别学生被标记为缺席或存在的 id。

const data = [
    { id: 1, firstName: 'John', lastName: 'Doe', absent: false },
    { id: 2, firstName: 'Jane', lastName: 'Doe', absent: false },
];

const StudentList = () => {
    const [students, setStudents] = useState(data);
    const updateAbsent = () => {
        const absents = students.filter((student) => student.absent === true);
        console.log(absents);
    };
    const handleToggleAbsent = (toggleStudent) => {
        setStudents((prevStudents) =>
            prevStudents.map((student) => {
                if (student.id !== toggleStudent.id) return student;
                return { ...student, absent: !student.absent };
            })
        );
    };

    return (
        <div className="attendance-today-container">
            <h1>Daily attendance</h1>
            <table>
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Absent?</th>
                    </tr>
                </thead>
                <tbody>
                    {students.map((student) => {
                        return (
                            <StudentItem
                                student={student}
                                key={student.id}
                                onToggleAbsent={handleToggleAbsent}
                            />
                        );
                    })}
                </tbody>
            </table>
            <button onClick={updateAbsent}>Send</button>
        </div>
    );
};

const StudentItem = (props) => {
    const { student, onToggleAbsent } = props;
    return (
        <tr>
            <td>{student.firstName}</td>
            <td>{student.lastName}</td>
            <td>
                <label className="switch">
                    <input
                        type="checkbox"
                        onClick={onToggleAbsent.bind(null, student)}
                    />
                    <span className="slider round"></span>
                </label>
            </td>
        </tr>
    );
};

export default StudentList;

Answer 2

这个概念与 Sheik Yerbouti 的建议和 SamiElk 所展示的内容一致。

获取学生对象数组并为每个对象添加一个名为absent的属性，并将其默认设置为false 。 然后根据数组中 object 的索引及其absent属性的当前值，让相应的复选框为每个学生正确切换absent 。 我创建了一个名为getData的 function，它将模拟您的 API 调用以获取学生数据。 这是代码：

import { useEffect, useState } from "react";
import "./styles.css";


const getData = () => {
  return new Promise(resolve => {
    resolve([{firstName: "John", lastName: "Marks"}, {firstName: "Garry", lastName: "Nelson"}]);
  })
}

export default function App() {
  const [students, setStudents] = useState([]);

  const markAbsent = (i) => {
    setStudents(prev => 
      prev.map((s, index) => ({...s, absent: i === index ? !s.absent : s.absent}))
    )
  }

  useEffect(() => {
    getData()
    .then(data => {
      data = data.map(i => ({absent: false, ...i}));
      setStudents(data);
    })
  }, [])

  return (
    <div className="attendance-today-container">
      <h1>Daily attendance</h1>
      <table>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Absent?</th>
        </tr>
        {students.map((student, i) => {
          return (
            <tr>
              <td key={i}>{student.firstName}</td>
              <td>{student.lastName}</td>
              <td>
                <label class="switch">
                  <input
                    type="checkbox"
                    defaultChecked={student.absent}
                    onClick={() => markAbsent(i)}
                  />
                  <span className="slider round"></span>
                </label>
              </td>
            </tr>
          );
        })}
      </table>
      <button onClick={() => false}>Send</button>
    </div>
  );
}

请注意，我不确定Send按钮应该做什么，所以我让它不起作用。 这是一个沙盒链接供您使用。