Question

我正在使用 react-table 在表中显示获取的数据。您还可以在该表中使用不同的按钮来与数据交互，例如删除条目或更新其数据（切换按钮以批准提交的行）。

在初始 useEffect(() => fetchBars(), []) 中获取数据，然后按照 react-table 文档中的建议通过 useMemo 将其传递给 useTable。现在我可以点击表格中前面提到的按钮来删除一个条目，但是当我尝试访问已在 bars 中设置的数据 (fetchBars()) 时，它返回 {{ 使用的默认状态1}} 是一个空数组 []。我缺少什么细节？例如，我想使用条形状态来过滤已删除的行，从而使表具有反应性，而不必在每次更新时重新获取。

在 useState() 中调用 console.log(bars) 时，它会正确显示获取的数据，但是在 updateMyData() 中调用 console.log(bars) 会产生空数组，为什么会这样？我是否需要将 handleApprovedUpdate() 和 useTable 挂钩传递到单元格中？

handleApprovedUpdate()

Answer 1

您在 handleApprovedUpdate 中看到过时值，因为它在第一次呈现组件时捕获 bars，然后从未更新，因为您在 COLUMNS 中使用它，这是用带有空依赖项数组的 useMemo 包裹。

这在您的示例中很难形象化，因为它通过了几层间接过滤，所以这是一个人为的示例：

function MyComponent() {
  const [bars, setBars] = useState([]);

  const logBars = () => {
    console.log(bars);
  };

  const memoizedLogBars = useMemo(() => logBars, []);

  useEffect(() => {
    setBars([1, 2, 3]);
  }, []);

  return (
    <button onClick={memoizedLogBars}>
      Click me!
    </button>
  );
}

点击该按钮将总是记录 []，即使 bars 在 useEffect 中立即更新为 [1, 2, 3]。当您使用 logBars 和一个空的依赖项数组记忆 useMemo 时，您是在告诉 React “使用您当前可以看到的 bars 的值，它永远不会改变（我保证）”。

您可以通过将 bars 添加到 useMemo 的依赖项数组来解决此问题。

const memoizedLogBars = useMemo(() => logBars, [bars]);

现在，点击按钮应该会正确记录 bars 的最新值。

在您的组件中，您应该能够通过将 columns 更改为

来解决您的问题

const columns = useMemo(() => COLUMNS, [bars]);

您可以在钩子 here 中阅读有关过时值的更多信息。您可能还需要考虑将 eslint-plugin-react-hooks 添加到您的项目设置中，以便您可以自动识别此类问题。

反应表，表中的 useState 钩子结果为默认值，尽管之前设置

1 个答案: