Блог

Главная - Вопросы по программированию - Переданные свойства не обновляются при повторном рендеринге с использованием (Material-ui React Redux Next.js в ССР)

Переданные свойства не обновляются при повторном рендеринге с использованием (Material-ui React Redux Next.js в ССР)

#redux #react-redux #material-ui #next.js #server-side-rendering

#сокращение #реагировать-redux #материал-пользовательский интерфейс #next.js #рендеринг на стороне сервера

Вопрос:

Привет, я не уверен, ошибка ли это, или я признателен, если кто-нибудь может мне помочь.

Я использовал Next.js v10 с Material-UI и React Redux / Redux в SSR. На самом деле у меня есть поддержка Redux, переданная в useStyles:

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

и используется в makeStyles:

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

Когда событие, которое обновляет «расширенное», происходит повторный рендеринг. Однако «расширенный» сохранил старое значение 180, но не 600.

Вышесказанное прекрасно в режиме разработки, но в SSR это проблематично. Я попытался использовать styled-components в SSR, и это сработало, как ожидалось.

Я пропустил какую-то конфигурацию в Material UI Redux SSR? Большое спасибо.

Комментарии:

1. Нужна дополнительная информация о том, как вы обновляете extended значение (т.Е. Действие, редуктор). Также неясно, какое это имеет отношение к рендерингу на стороне сервера. Существуют ли несоответствия между отображением сервера и клиента?

2. Да, я обновил свойство «extended», отправив событие Redux.

Ответ №1:

Redux / React Redux — это нормально. Я должен использовать clsx для решения проблемы.

(Ниже приведены коды всех случаев для Next.js ССР)

СЛУЧАЙ 1 (это работает!):

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

СЛУЧАЙ 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'};
`;

Ответ №2:

Я думаю, проблема в том, что вы пытаетесь передать expanded prop в 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} />;
}

Вы также можете обратиться к этому примеру

Метки: