Reactmap只檢查最后一個復選框

我有兩組獨特的復選框，每組都有自己的欄位，其中一些已選中，所以我想在頁面加載時默認選中選中的復選框，但由于某種原因它只選擇最后一個復選框并忽略第一個串列

您可以在codesandbox上查看

import React, { Component, useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import { Checkbox, Pane, Label } from "evergreen-ui";

function ControlledCheckboxExample() {
  const [checked, setChecked] = React.useState(true);
  const [fieldchecked, setIsFieldChecked] = React.useState(false);
  const [editContactFields, setContactFields] = React.useState([]);
  useEffect(() => {
    loaddata();
  }, []);
  const loaddata = () => {
    let data = [
      {
        id: 1,
        label: "First Checkbox",
        type: "checkbox",
        selectedvalue: [
          {
            value: "one"
          },
          {
            value: "two"
          }
        ],
        hasvalue: true,
        tag: "UNIQUEONE",
        options: [
          {
            value: "one",
            text: "one"
          },
          {
            value: "two",
            text: "two"
          },
          {
            value: "three",
            text: "three"
          },
          {
            value: "four",
            text: "four"
          }
        ],
        visible: true
      },
      {
        id: 2,
        label: "Second Checkbox",
        type: "checkbox",
        selectedvalue: [
          {
            value: "five"
          }
        ],
        hasvalue: true,
        tag: "UNIQUETWO",
        options: [
          {
            value: "five",
            text: "five"
          }
        ],
        visible: true
      }
    ];
    setContactFields(data);
    data.map((field, index) => {
      if (field.type === "checkbox" && field.hasvalue == true) {
        setIsFieldChecked(false);
        let value = field.selectedvalue;
        let tag = field.tag;
        value.map((realvalue) => {
          let fieldvalud = realvalue.value;
          setIsFieldChecked((fieldchecked) => ({
            ...fieldchecked,
            [fieldvalud   tag]: !fieldchecked[fieldvalud   tag]
          }));
        });
      }
    });
  };

  const handlefieldchecked = (a, f) => {
    const fieldvalud = a;
    const tag = f;

    setIsFieldChecked((fieldchecked) => ({
      ...fieldchecked,
      [fieldvalud   tag]: !fieldchecked[fieldvalud   tag]
    }));
  };

  return (
    <Pane>
      {editContactFields.map((field) => (
        <Pane>
          <Label>
            {field.label} {field.required == true && "*"}
          </Label>
          {field.options.map((checkboxfield) => (
            <Checkbox
              name={field.tag   "[]"}
              id={field.tag}
              type={field.type}
              value={checkboxfield.value}
              label={checkboxfield.text}
              checked={fieldchecked[checkboxfield.value   field.tag]}
              required={field.required}
              onChange={(e) =>
                handlefieldchecked(checkboxfield.value, field.tag)
              }
            />
          ))}
        </Pane>
      ))}
    </Pane>
  );
}

ReactDOM.render(<ControlledCheckboxExample />, document.getElementById("root"));

當我洗掉第二組復選框時，它會正常作業，但一旦我添加它，它就會忽略第一組。

有沒有辦法讓它正常作業？

uj5u.com熱心網友回復：

當您映射到data您重置fieldchecked時setIsFieldChecked(false);，將導致僅具有地圖最后一次迭代的值。

data.map((field, index) => {
  if (field.type === "checkbox" && field.hasvalue == true) {
    // setIsFieldChecked(false); => remove this
    let value = field.selectedvalue;
    let tag = field.tag;
    value.map((realvalue) => {
      let fieldvalud = realvalue.value;
      setIsFieldChecked((fieldchecked) => ({
        ...fieldchecked,
        [fieldvalud   tag]: !fieldchecked[fieldvalud   tag],
      }));
    });
  }
});

標籤：反应

上一篇：REACT：如何在return陳述句中呈現varComponent=newComponent？

下一篇：如何在React中將函式作為引數傳遞？