javascript - 使用 React 管理无限滚动表中的复选框状态

Question

请看 this codesandbox .
此代码框模拟了我在生产应用程序中遇到的问题。
我有一个包含复选框的无限滚动表，我需要管理不断增长的复选框列表及其状态(选中与未选中)。复选框是通过渲染 React 组件的 vanilla 函数(参见 getCheckbox )渲染的。但是，我的复选框似乎没有保持父状态(在代码中称为 state)并且单击复选框不起作用。我需要做些什么来确保单击复选框更新 state并且所有的复选框都听state ?谢谢!代码也在下面:
index.js:

import ReactDOM from "react-dom";
import "@elastic/eui/dist/eui_theme_amsterdam_light.css";
import React, { useState, useEffect } from "react";
import { EuiCheckbox, htmlIdGenerator } from "@elastic/eui";
import { arrayRange, getState } from "./utils";

const Checkbox = ({ id, isChecked, onClick }) => (
  <div style={{ margin: "1rem" }}>
    <EuiCheckbox
      id={htmlIdGenerator()()}
      label={isChecked ? `${id} - On` : `${id} - Off`}
      checked={isChecked}
      onChange={() => onClick()}
    />
  </div>
);

const getCheckbox = (props) => <Checkbox {...props} />;

const App = () => {
  const [state, setState] = useState(getState(0, 1));
  const [checkboxes, setCheckboxes] = useState([]);
  const [addMoreCheckboxes, setAddMoreCheckboxes] = useState(true);

  useEffect(() => {
    if (addMoreCheckboxes) {
      setAddMoreCheckboxes(false);

      setTimeout(() => {
        setState((prevState) => ({
          ...prevState,
          ...getState(checkboxes.length, checkboxes.length + 1)
        }));

        const finalCheckboxes = [...checkboxes].concat(
          arrayRange(checkboxes.length, checkboxes.length + 1).map((id) =>
            getCheckbox({
              id,
              isChecked: state[id],
              onClick: () => handleClick(id)
            })
          )
        );

        setCheckboxes(finalCheckboxes);

        setAddMoreCheckboxes(true);
      }, 3000);
    }
  }, [addMoreCheckboxes]);

  const handleClick = (id) =>
    setState((prevState) => ({
      ...prevState,
      [id]: !prevState[id]
    }));

  return <div style={{ margin: "5rem" }}>{checkboxes}</div>;
};

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

utils.js:

export const arrayRange = (start, end) =>
  Array(end - start + 1)
    .fill(null)
    .map((_, index) => start + index);

export const getState = (start, end) => {
  const state = {};

  arrayRange(start, end).forEach((index) => {
    state[index] = false;
  });

  return state;
};

Answer 1

您的复选框未更新的主要原因之一。
这是你的checkboxes状态变量

此变量不包含数据，而是包含已处理的 React JSX 元素本身。

这不是错误的做法，但并不常见。有点容易忘记数据的实际存储位置等。我建议使用 useMemo用于与 UI 相关的内存。

与前一点有关。在 useEffect 中观察如何，当您尝试将新数据附加到 checkboxes变量，您使用的是前一个 checkboxes 中的扩展运算符值(value)

由于checkboxes value 只是简单地处理 JSX，它们不会重新渲染或重新处理(它们只是“存在”，就像绘制的图片一样!与状态完全没有关系!)

所以基本上，这个操作只是将未选中复选框的新“绘图”添加到先前绘制的 JSX 列表中。所以你只会得到一个更长的不可变的、预渲染的 JSX 复选框列表，这些复选框卡在未选中状态!

所以.. 要解决这个问题，我建议您将数据状态与 UI 绘图分开。也许使用 useMemo帮助。
我对您的代码进行了最低限度的修改，它位于此处 ( https://codesandbox.io/s/cranky-firefly-9ibgr)。这应该像您期望的那样。
为方便起见，这里是与沙箱中完全相同的修改代码。

import ReactDOM from "react-dom";
import "@elastic/eui/dist/eui_theme_amsterdam_light.css";
import React, { useState, useEffect, useMemo } from "react";
import { EuiCheckbox, htmlIdGenerator } from "@elastic/eui";
import { arrayRange, getState } from "./utils";

const Checkbox = ({ id, isChecked, onClick }) => (
  <div style={{ margin: "1rem" }}>
    <EuiCheckbox
      id={htmlIdGenerator()()}
      label={isChecked ? `${id} - On` : `${id} - Off`}
      checked={isChecked}
      onChange={() => onClick()}
    />
  </div>
);

const getCheckbox = (props, key) => <Checkbox {...props} key={key}/>;

const App = () => {
  // The checkbox check/uncheck state variable
  const [state, setState] = useState(getState(0, 1));

  // Checkboxes now just contains the `id` of each checkbox (purely data)
  const [checkboxes, setCheckboxes] = useState([]);
  const [addMoreCheckboxes, setAddMoreCheckboxes] = useState(true);

  useEffect(() => {
    if (addMoreCheckboxes) {
      setAddMoreCheckboxes(false);

      setTimeout(() => {
        setState((prevState) => ({
          ...prevState,
          ...getState(checkboxes.length, checkboxes.length + 1)
        }));

        // Add new ids to the list
        const finalCheckboxes = [...checkboxes].concat(
          arrayRange(checkboxes.length, checkboxes.length + 1)
        );

        setCheckboxes(finalCheckboxes);

        setAddMoreCheckboxes(true);
      }, 3000);
    }
  }, [addMoreCheckboxes]);

  const handleClick = (id) => {
    setState((prevState) => ({
      ...prevState,
      [id]: !prevState[id]
    }));
  };
  
  // use useMemo to check for rerenders. (kind of like, data-driven UI)
  const renderedCheckboxes = useMemo(() => {
    return checkboxes.map((id) => {
      // I'm adding a second argument to `getCheckbox` for its key
      // This is because `React` lists (arrays of JSXs) need keys on each JSX components
      // You could also just skip the function calling altogether
      // and create the <Checkbox .../> here. There's little performance penalty
      return getCheckbox({
        id,
        isChecked: state[id],
        onClick: () => handleClick(id)
      }, id)
    });
  }, [checkboxes, state]);

  return <div style={{ margin: "5rem" }}>{renderedCheckboxes}</div>;
};

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

附言我同意 Oliver 的评论，即使用 useEffect与另一个切换( addMoreCheckboxes )是非常非正统的。我建议将其重构为 setInterval (或者可能是 setTimeout 在 useEffect 中带有 bool 条件，以防您想要更多控制)。