反应表格单元格卸载？

Question

当使用反应表时，我们通常会因单元组件的不断未安装而感到困惑。这是一个示例（沙箱）：

const data = [{ name: "Lukas" }];

export default function App() {
  const [count, setCount] = useState(0);

  const columns = useMemo(() => {
    return [
      {
        Header: "name",
        accesspor: "name",
        Cell: (props) => {
          useEffect(() => () => console.log("unmount"), []);
          return (
            <div>
              {props.value} + {count}
            </div>
          );
        }
      }
    ];
  }, [count]);

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({ data, columns });

  return (
    <div className="App">
      <button onClick={() => setCount((c) => c + 1)}>increment</button>
      <div>
        <table {...getTableProps()}>
            ...render the table
        </table>
      </div>
    </div>
  );
}

column

数组取决于

count

。如果我们增加计数，所有单元格都会完全卸载。我尝试添加

key

属性来表示稳定的实体 - 但发现没有办法阻止卸载。

为什么我的卸载有问题？如果嵌套组件依赖于状态，则状态在卸载时完全重置。

有什么办法可以防止

Cell

组件被卸载吗？

Answer 1

我相信这是由于每次

columns

更改且

count

回调执行时

useMemo

被重新定义造成的。结果，

Cell

的匿名函数被重新定义，这会导致挂载和卸载。您可以通过从

count

的 deps 中删除

useMemo

来检查这一点。

要解决这个问题，您需要找到一种方法使

columns

不依赖于

count

。也许你可以找到一种方法将计数直接传递到 React 表上下文。一种方法是使用

meta

。请参阅沙盒。