Возникли проблемы с установкой флажков в реагирующем функциональном компоненте?

Question

//Main functional component
function CustomizedTables(props) {
  const classes = useStyles();
  const [nameCheckbox, setnameCheckbox] = useState([]);
  const [emailCheckbox, setemailCheckbox] = useState([]);
  const [faxCheckbox, setfaxCheckbox] = useState([]);
  const [loopStopFlag, setFlag] = useState(true);
  const [emailFlag, setEmailFlag] = useState(false);
  const rows = props.data;

  //Initialization of checkboxes to true
  if (loopStopFlag) {
    let nameArray = [];
    let emailArray = [];
    let faxArray = [];
    rows.SupplierList.forEach((supplier, i) => {
      nameArray.push(true);
      if (supplier.Email) {
        emailArray.push(true);
      } else {
        emailArray.push(null);
      }
      if (supplier.Fax) {
        faxArray.push(true);
      } else {
        faxArray.push(null);
      }
    });
    setnameCheckbox(nameArray);
    setemailCheckbox(emailArray);
    setfaxCheckbox(faxArray);
    setFlag(false);
  }

  //Reseting all checkboxes
  const resetAllCheckbox = () => {
    let nameArray = [];
    let emailArray = [];
    let faxArray = [];

    rows.SupplierList.forEach((supplier, i) => {
      nameArray.push(false);
      if (supplier.Email) {
        emailArray.push(false);
      } else {
        emailArray.push(null);
      }
      if (supplier.Fax) {
        faxArray.push(false);
      } else {
        faxArray.push(null);
      }
    });
    setnameCheckbox(nameArray);
    setemailCheckbox(emailArray);
    setfaxCheckbox(faxArray);
    if (emailCheckbox.includes(true)) {
      setEmailFlag(false);
    } else {
      setEmailFlag(true);
    }
  };

  //Displaying data on screen
  return (
    <div>
      <Paper className={classes.root} style={{ marginLeft: "32px" }}>
        <Table className={classes.table} aria-label="customized table">
          <TableBody>
            {rows.SupplierList.map((row, i) => (
              <StyledTableRow key={i}>
                <StyledTableCell style={{ color: "#474747" }} align="center">
                  <label>
                    {row.Name}{" "}
                    <input
                      type="checkbox"
                      style={{ marginLeft: "5px", cursor: "pointer" }}
                      onChange={() => {
                        let arr = nameCheckbox;
                        arr[i] = !arr[i];
                        setnameCheckbox(arr);
                      }}
                      defaultChecked={nameCheckbox[i]}
                    />
                  </label>
                  <br />
                  <div style={{ fontSize: "11px" }}>{row.Gbf && "GBF"}</div>
                </StyledTableCell>
                <StyledTableCell align="center" style={{ color: "#474747" }}>
                  {row.Email && (
                    <React.Fragment>
                      <input
                        type="checkbox"
                        style={{ marginLeft: "5px", cursor: "pointer" }}
                        onChange={() => {
                          let arr1 = emailCheckbox;
                          arr1[i] = !arr1[i];
                          setemailCheckbox(arr1);
                          if (emailCheckbox.includes(true)) {
                            setEmailFlag(false);
                          } else {
                            setEmailFlag(true);
                          }
                        }}
                        defaultChecked={emailCheckbox[i]}
                      />
                    </React.Fragment>
                  )}
                </StyledTableCell>
                <StyledTableCell align="center" style={{ color: "#474747" }}>
                  {row.Fax && (
                    <React.Fragment>
                      <input
                        type="checkbox"
                        style={{ marginLeft: "5px", cursor: "pointer" }}
                        onChange={() => {
                          let arr2 = faxCheckbox;
                          arr2[i] = !arr2[i];
                          setfaxCheckbox(arr2);
                        }}
                        value={faxCheckbox[i]}
                        defaultChecked={faxCheckbox[i]}
                      />
                    </React.Fragment>
                  )}
                </StyledTableCell>
              </StyledTableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>
      <br />
      <Button
        variant="danger"
        style={{ width: "100px" }}
        onClick={resetAllCheckbox}
      >
        Reset
      </Button>
    </div>
  );
}
export default CustomizedTables;

Я столкнулся с проблемой сброса флажков. Когда я их сбрасываю, обновляется только массив, но не выполняется никаких действий или флажков. Я использовал и selected, и defaultChecked, но также столкнулся с проблемой, что bool обновляется, но флажок не обновляется. Я хочу решение для этого. На самом деле, когда я нажимаю кнопку сброса, мои флажки остаются в той же форме, но состояние обновляется

Answer 1

Я не смог воспроизвести ваш точный код в песочнице из-за его зависимостей, поэтому я привел простой пример с набором флажков, проверкой действия и действием сброса.

Изменение кода на основе на примере и в этих примечаниях все будет работать, как и ожидалось:

• Всякий раз, когда вы визуализируете элемент реагирования из внутренних циклов, вы должны предоставить уникальный ключ, это помогает реагировать, чтобы определить, что изменилось.

• Сохраняйте состояние вашего флажка в состоянии реакции / хранения и устанавливайте его, используя проверенный проп, а не defaultChecked. При перезагрузке обновите хранилище / локальные состояния, и компонент будет перерисован.

Проверьте «песочницу»: https://codesandbox.io/s/pedantic-violet-twtvn?fontsize=14&hidenavigation=1&theme=dark

import React, { useState, useEffect } from "react";

function CheckboxDemo({ data }) {
  const [features, setFeatures] = useState([]);

  useEffect(() => {
    setFeatures(data);
  }, [data]);

  const resetCheckboxes = () => {
    const newFeatures = [];
    features.forEach(f => {
      newFeatures.push({ ...f, checked: false });
    });
    setFeatures(newFeatures);
  };

  const setFeatureCheck = index => () => {
    const updatedFeature = {
      ...features[index],
      checked: !features[index].checked
    };
    const newFeatures = [
      ...features.slice(0, index),
      updatedFeature,
      ...features.slice(index + 1)
    ];
    setFeatures(newFeatures);
  };

  const checkBoxes = features.map((f, i) => (
    <div className="box" key={i + "_" + f.label}>
      <input
        type="checkbox"
        checked={f.checked}
        onChange={setFeatureCheck(i)}
      />{" "}
      {f.label}
    </div>
  ));

  return (
    <div className="wrapper">
      {checkBoxes}
      <div className="controls">
        <input type="button" onClick={resetCheckboxes} value="Reset" />
      </div>
    </div>
  );
}
export default CheckboxDemo;