使用 react-redux 翻译函数时呈现的钩子比预期的少

Question

我在使用以下代码时收到 Rendered fewer hooks than expected. This may be caused by an accidental early return statement. 消息：

{headRows
    // Filter table columns based on user selected input
    .filter(item => displayedColumns.includes(item.id))
    .map(row => (
      <TableCell
        key={row.id}
        align={row.numeric ? "right" : "left"}
        padding={row.disablePadding ? "none" : "default"}
        sortDirection={orderBy === row.id ? order : false}
      >
        <TableSortLabel
          active={orderBy === row.id}
          direction={order}
          onClick={createSortHandler(row.id)}
        >
          {useTranslation(row.label)}
        </TableSortLabel>
      </TableCell>
))}

我的翻译函数是这样的：

import { useSelector } from "react-redux";

export const useTranslations = () =>
    useSelector(state => state.translations.data, []);

如果我向其中传递一个字符串，翻译函数就会按预期工作。但是，如果我将 {useTranslation(row.label)} 替换为 {row.label}，我就不会再收到错误消息。在我看来，我没有在循环、条件或嵌套函数中调用 Hooks，还是我错了？

Answer 1

Don’t call Hooks inside loops, conditions, or nested functions.

-- https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

Answer 2

您有一个呈现单元格列表的组件。但是这里渲染的每个单元格都由一个回调传递给 map。所以，实际上，这里既有循环函数又有嵌套函数。

我建议您将回调提取到新组件并进行渲染。在这种情况下，每个单元格都将是一个新组件，您可以自由使用钩子。


const MyTableCell = props => {
   const {row} = props;
   const title = useTranslation(row.label);
   return (
       <TableCell>
        <TableSortLabel>
          {title}
        </TableSortLabel>
      </TableCell>
   )

}

// and then

{headRows
    // Filter table columns based on user selected input
    .filter(item => displayedColumns.includes(item.id))
    .map(row => (
      <MyTableCell row={row} key={row.id} />
))}

使用 react-redux 翻译函数时呈现的钩子比预期的少

Rendered fewer hooks than expected when using a react-redux translate function

reactjs

material-ui

react-hooks