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 条件，以防您想要更多控制)。