小编Pet*_*ter的帖子

我目前正在尝试从 react-redux connect() hoc 切换到将在 react-redux 7.1.x 中引入的新 hooks api。

一些示例已经在工作，但我无法解决以下问题。我有以下 redux 功能：

    export const translate = key => (dispatch, getState) =>
    getState().translations.data[key] || "";

它将密钥翻译成给定的语言。在我的组件中，我目前正在调用这样的函数：

import React, { Fragment, useCallback } from "react";
import { Button } from "@material-ui/core";

import { useDispatch } from "react-redux";

import { LanguageActions } from "../../redux/actions";

export default function LanguageSwitcher() {
    const dispatch = useDispatch();

    const translateKey = useCallback(
        key => dispatch(LanguageActions.translate(key)),
        []
    );
    const requestCustomLanguage = useCallback(
        requestedLanguage =>
            dispatch(LanguageActions.loadCustomLanguage(requestedLanguage)),
        []
    );

    return …

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, []); …

第二个 Material-UI 卡片的蓝色 CardActions 部分没有停留在底部，这使得页面看起来不简洁。

我已经尝试将 CardContent 的高度设置为 100%，但没有任何改变。

我创建了一个沙箱来说明问题：

https://codesandbox.io/s/happy-glitter-7vyep

我希望 Material-UI CardAction 始终位于容器的底部，无论 CardContent 中有多少项。

我正在尝试将 Material-UI 面包屑与 react-router 一起使用。如何以编程方式检测当前路线。

在 Material-UI 网站上有一个关于如何使用它的示例，但它需要使用静态面包屑名称映射。我已经尝试使用 HOC“withRouter”拆分路径名，但它不起作用。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Breadcrumbs, Link, Paper, Typography} from "@material-ui/core";

import { withRouter } from "react-router-dom";

import { useTranslation } from "../Translate";

const useStyles = makeStyles(theme => ({
    root: {
        justifyContent: "center",
        flexWrap: "wrap",
    },
    paper: {
        padding: theme.spacing(1, 2),
    },
}));

const breadcrumbNameMap = {
    "/inbox": "Inbox",
    "/inbox/important": "Important",
    "/trash": "Trash",
    "/spam": "Spam",
    "/drafts": "Drafts",
};

function SimpleBreadcrumbs(props) {
    const classes = …