如何将数据加载到单选按钮并使用React修改它们

Question

我是 React 新手，我对 Express（数据库：MSSQL）和 React 有疑问。

我有这个虚构的，我想用单选按钮可视化每个人的数据。

当我尝试时，我可以成功地将其加载到前端，但我无法修改它们的值。我找到了一种方法，但它只能在第二次单击时渲染新值以通过 setChecked 检查，但我单击的单选按钮无法被选中。

datajs：我制作了这个对象化数组，因为我需要使用 sql 列标题来更容易实现

有没有更好的方法将数据动态渲染到前端？

提前致谢！

row.map((row) => (
  {data.map((data) => (
    <TableRow sx={{ "&:last-child td, &:last-child th": { border: 0, }, }} key={data.id} >
      <TableCell component="th" scope="row">
        {data.name}
      </TableCell>
      {["C", "I"].map((option) => (
        <TableCell align="right">
          <input
            type="radio"
            name={data.radio}
            value={option}
            defaultChecked={
              row[data.sqlCol] === option
            }
            onChange={handleChange}
          />
        </TableCell>
      ))}
    </TableRow>
  ))}

  const data = datajs.map((item, index) => ({
    ...item,
    id: index + 1,
    radio: item.sqlCol,
  }));

const datajs= [
  {
    name: "Homework",
    sqlCol: "Homework_School",
  },
  {
    name: "Laundry",
    sqlCol: "Laundry_Home",
  },
]

const handleChange = (e) => {
    const updatedValue = { [e.target.name]: e.target.value };
    const isAlreadyChecked = checked.some(
      (item) => Object.keys(item)[0] === e.target.name
    );
    if (isAlreadyChecked) {
      setChecked((prev) =>
        prev.map((item) =>
          Object.keys(item)[0] === e.target.name ? updatedValue : item
        )
      );
    } else {
      setChecked((prev) => [...prev, updatedValue]);
    }
  };

Answer 1

我认为问题出在你的 handleChange 函数中。试试这个，如果您有任何其他问题，请问我

const handleChange = (e) => {
    const { name, value } = e.target;
    setChecked((prevChecked) => ({
      ...prevChecked,
      [name]: value,
    }));
  };