处理带有嵌套对象数组的复选框

Question

我有一个呈现多个复选框的组件。每个复选框都通过在渲染时分配的 checked 属性进行动态处理。我需要打印/渲染所选复选框的值。 示例状态如下所示：

{
        Filters: [
          {
            name: "Vegetables",
            options: [
              {
                value: "tmto",
                name: "Tomato"
              },
              {
                value: "ptato",
                name: "Potato"
              }
            ]
          },
          {
            name: "Fruits",
            options: [
              {
                value: "ornge",
                name: "Orange"
              },
              {
                value: "grps",
                name: "Grapes"
              }
            ]
          }
        ],
      selected: []
    }

我先映射一个类别名称，然后再将 checkboxes 映射到相应的值和名称，例如：

Vegetables
checkbox 1
checkbox 2

Fruits
checkbox 3
checkbox 4

我有一个相同https://codesandbox.io/s/react-functional-component-forked-wb1ew 的工作 sn-p 但不确定为什么它无法设置与所选复选框匹配的状态。 我对如何处理这种嵌套的复选框状态有点困惑。

非常感谢任何解决此问题的帮助。

Answer 1

我分叉了您的 CodeSandbox 并应用了修复程序。您可以在下面找到可行的解决方案。

https://codesandbox.io/s/react-functional-component-forked-gmwv0

---

有相当多的地方需要更改，但我会尽力覆盖它。

1. 您在handleCheckboxChange 中引用了this.setState，这在功能组件中不起作用。在函数式组件中，您使用 useState 挂钩的第二个参数，在本例中等于 setState。函数式组件不会将this 用于任何内部方法。
2. 您的渲染函数中存在无效语法。您需要确保始终返回带有单个顶级包装组件的 JSX 对象。
3. 其余问题都在您的 handleCheckboxChange 内部。由于 setState 的异步特性，最好使用 setState 内部的回调，即setState((prevState) => {})，这将确保您没有过时的状态。您还需要从中返回一个对象，这将是您的新状态。
4. 我更新了复选框（选中）的值以使用您在此函数中计算的选定值。
5. 我做的最后一件事是更新映射以正确返回格式正确的状态。

最终解决方案

const App = (props) => {
  const [state, setState] = useState({
    Filters: [
      {
        name: "Vegetables",
        options: [
          {
            value: "tmto",
            name: "Tomato"
          },
          {
            value: "ptato",
            name: "Potato"
          }
        ]
      },
      {
        name: "Fruits",
        options: [
          {
            value: "ornge",
            name: "Orange"
          },
          {
            value: "grps",
            name: "Grapes"
          }
        ]
      }
    ],
    selected: []
  });

  const handleCheckboxChange = (value) => {
    setState((state) => {
      const updatedEtables = state.selected.find((obj) => obj === value);
      const selected = updatedEtables
        ? state.selected.filter((obj) => obj !== value)
        : [...state.selected, value];

      return {
        selected,
        Filters: [
          ...state.Filters.map((filter) => {
            return {
              ...filter,
              options: filter.options.map((ele) => {
                return {
                  ...ele,
                  checked: selected.includes(ele.value)
                };
              })
            };
          })
        ]
      };
    });
  };

  return (
    <div>
      {state.Filters.map((ele) => {
        return (
          <React.Fragment>
            <h6>{ele.name}</h6>
            {ele.options.map((item) => {
              return (
                <div>
                  <input
                    checked={item.checked || false}
                    onChange={() => handleCheckboxChange(item.value)}
                    type="checkbox"
                  />
                </div>
              );
            })}
          </React.Fragment>
        );
      })}

      <strong>Selected: </strong>
      <br />
      <span>{state.selected.join(",")}</span>
    </div>
  );
};

Answer 2

链接代码会引发错误，因为{...} 符号必须始终夹在标签之间。

以下是无效的 JSX：

return (
  <h1>Hello World!</h1>
  {data}
);

JSX 必须始终只有一个根组件。如果您想返回多个根级组件，请将它们包装在 React.Fragment 中。

上面无效的例子应该写成：

return (
  <React.Fragment>
    <h1>Hello World!</h1>
    {data}
  </React.Fragment>
);

这确保只有一个根组件可以解决您的错误。

---

将此应用于您的代码会改变我：

return (
  <div>
    {state.Filters.map(ele => {
      return (
        <h6>{ele.name}</h6>
        {ele.options.map(item => {
          return (
            <div>
              <input 
                checked={item.checked}
                onChange={() => handleCheckboxChange(item.value)}
                type="checkbox"
              />
            </div>
          )
        })}
      )
    })}
    <strong>Selected: </strong>
    <br />
    <span>{state.selected.join(",")}</span>
  </div>
);

进入：

return (
  <div>
    {state.Filters.map(ele => {
      return (
        <React.Fragment>
          <h6>{ele.name}</h6>
          {ele.options.map(item => {
            return (
              <div>
                <input 
                  checked={item.checked}
                  onChange={() => handleCheckboxChange(item.value)}
                  type="checkbox"
                />
              </div>
            )
          })}
        </React.Fragment>
      )
    })}
    <strong>Selected: </strong>
    <br />
    <span>{state.selected.join(",")}</span>
  </div>
);

注意React.Fragment 的使用。您还可以使用较新的 short syntax (<>...</>)，它看起来更干净 (but lacks some tool support)。您还可以通过使用箭头函数的隐式返回值来进一步清理代码。

return (
  <div>
    {state.Filters.map(ele => (
      <>
        <h6>{ele.name}</h6>
        {ele.options.map(item => (
          <div>
            <input 
              checked={item.checked}
              onChange={() => handleCheckboxChange(item.value)}
              type="checkbox"
            />
          </div>
        ))}
      </>
    ))}
    <strong>Selected: </strong>
    <br />
    <span>{state.selected.join(",")}</span>
  </div>
);

Answer 3

在@Chris 的帮助和@3limin4t0r 的宝贵意见的帮助下，我正在这里按照@ggorlen 的建议编译最终的工作代码，以供将来可能遇到相同问题的人使用：

import React, { useState } from "react";
import { render } from "react-dom";

const App = (props) => {
  const [state, setState] = useState({
    Filters: [
      {
        name: "Vegetables",
        options: [
          {
            value: "tmto",
            name: "Tomato"
          },
          {
            value: "ptato",
            name: "Potato"
          }
        ]
      },
      {
        name: "Fruits",
        options: [
          {
            value: "ornge",
            name: "Orange"
          },
          {
            value: "grps",
            name: "Grapes"
          }
        ]
      }
    ],
    selected: []
  });

  const handleCheckboxChange = (value) => {
    setState((state) => {
      const updatedEtables = state.selected.find(
        (obj) => obj === value
      );
      const selected = updatedEtables
        ? state.selected.filter(
            (obj) => obj !== value
          )
        : [...state.selected, value];

      return {
        selected,
        Filters: [
          ...state.Filters.map((filter) => {
            return {
              ...filter,
              options: filter.options.map((ele) => {
                return {
                  ...ele,
                  checked: selected.includes(ele.value)
                };
              })
            };
          })
        ]
      };
    });
  };

  return (
    <div>
      {state.Filters.map((ele) => {
        return (
          <React.Fragment>
            <h6>{ele.name}</h6>
            {ele.options.map((item) => {
              return (
                <div>
                  <input
                    checked={item.checked || false}
                    onChange={() => handleCheckboxChange(item.value)}
                    type="checkbox"
                  />
                </div>
              );
            })}
          </React.Fragment>
        );
      })}

      <strong>Selected: </strong>
      <br />
      <span>{state.selected.join(",")}</span>
    </div>
  );
};

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