使用（Material-ui + React Redux + SSR 中的 Next.js）重新渲染未更新传递的属性答案

【问题标题】：Passed properties not updated from re-rendering using (Material-ui + React Redux + Next.js in SSR)使用（Material-ui + React Redux + SSR 中的 Next.js）重新渲染未更新传递的属性
【发布时间】：2021-04-27 14:35:59
【问题描述】：

您好，我不确定这是错误还是如果有人可以帮助我，我很感激。

我在 SSR 中使用了带有 Material-UI 和 React Redux / Redux 的 Next.js v10+。实际上我有一个 Redux Prop 传递给 useStyles：

const extended = useSelector(state => state.someStore.extended);
const classes = useStyles({
    extended
});

并在makeStyles中使用：

toolbar: {
    height: props => props.extended ? 180 : 600
}

当更新“扩展”的事件时，会发生重新渲染。但是，“扩展”保留了旧值 180 而不是 600。

以上在开发模式下很好，但在 SSR 中却有问题。我尝试在 SSR 中使用 styled-components 并按预期工作。

我是否错过了 Material UI + Redux + SSR 中的一些配置？非常感谢。

【问题讨论】：

需要更多关于如何更新extended 值（即操作、reducer）的信息。也不清楚这与服务器端渲染有什么关系。服务器和客户端渲染之间是否存在不一致？
是的，我通过调度 Redux 事件更新了“扩展”属性。

标签： redux react-redux material-ui next.js server-side-rendering

【解决方案1】：

我认为问题在于您试图将 expanded 道具传递给 useStyles 钩子，但它不期望任何参数。要使其正常工作，您可以尝试以下操作：

const useStyles = ({ expanded }) =>
  makeStyles({
    toolbar: {
      height: expanded ? 180 : 600
    }
  });

const SomeComponent = () => {
  const expanded = useSelector(state => state.someStore.expanded);
  const classes = useStyles({ expanded })();

  return <Toolbar className={classes.toolbar} />;
}

也可以参考this example

【讨论】：

【解决方案2】：

Redux/React Redux 很好。我必须使用 clsx 来解决问题。

（以下代码都是Next.js SSR的情况）

案例 1（有效！）：

<Toolbar className={clsx(classes.toolbar, expanded && classes.expanded)} />
const useStyles = makeStyles(theme => ({
    toolbar: {
        height: 180
    },
    expanded: {
        height: 600
    }
}));

CASE 2（它不起作用！（我的原创作品）：

const classes = useStyles({ expanded });
<Toolbar className={classes.toolbar} />
const useStyles = makeStyles(theme => ({
    toolbar: {
        height: props => props.expanded ? 600 : 180
    }
}));

案例 3（有效！）：虽然像这样使用样式组件很好：

<Toolbar expanded={expanded} />
const Toolbar = styled.div`
    height: ${props => props.expanded ? '600px' : '180px'};
`;

【讨论】：