React Page продолжает сбой при доступе к состоянию компонента

Question

Я точно не знаю, что я делаю, но я пытаюсь создать какое-то боковое меню, которое будет переключать содержимое в теге <main> при нажатии кнопок меню. Но проблема в том, что когда я читаю содержимое моей начальной страницы через MainMenu state, страница просто останавливается, пока в конце концов не сообщит мне, что React потерпел крах.

Тег main:

<main
    className={classNames(classes.content)}
>
    <div className={classes.drawerHeader} />
    { this.state.content }
    { this.state.modal }
</main>

Исходное состояние:

state = {
    open: false,
    modal: <GameDialog
        dialogTitle={"Title"}
        dialogContentText={"Description"}
        open={false}
    />,
    content: [
        <div key={Math.random()}>Still need to write something here</div>,
        <ComplexCardGrid
            key={Math.random()}
            gridHeader="Featured Projects"
            category="featured"
            featured={true}
        />
    ]
};

У меня есть функция handleClick, которая ничего не делает, даже если она используется в моем меню:

handleClick = id => {
    let newContent = [];
    switch (id) {
        case MainMenuConstants.COMMERCIAL:
            newContent.push(
                <ComplexCardGrid
                    key={Math.random()}
                    gridHeader="Commercial Projects"
                    category="commercial"
                />
            );
            break;

        ...

        case MainMenuConstants.CONTACT:
        case MainMenuConstants.ABOUT:
        case MainMenuConstants.HOME:
        default:
            newContent.push(
                <div>Still need to write something here</div>
            );
            newContent.push(
                <ComplexCardGrid
                    key={Math.random()}
                    gridHeader="Featured Projects"
                    category="featured"
                    featured={true}
                    modalClick={this.openModal}
                />
            );
            break;
    }
    this.handleDrawerClose();
    this.setState({
        content: newContent
    })
};

Я вызываю функцию handleClick следующим образом:

<Button onClick={() => this.handleClick(MainMenuConstants.COMMERCIAL)}>
    <ListItem>
        <ListItemIcon><AttachMoney /></ListItemIcon>
        <ListItemText primary="Commercial Projects"/>
    </ListItem>
</Button>

Опять же, я, наверное, все делаю неправильно. Но что я могу сделать, чтобы сделать эту работу?

Answer 1

Несколько советов.

1. Вы не должны хранить элементы JSX в вашем состоянии. Элемент JSX является результатом выполнения чего-то вроде <ComplexCardGrid />. Их следует создавать и использовать только при визуализации вашего приложения.
2. Использование случайных ключей заставит каждый компонент непрерывно демонтировать и перемонтировать. Вам нужно найти правильный способ убедиться, что ключи являются уникальными и не меняются между рендерами. Вероятно, вы можете просто использовать индекс массива для этого, хотя это тоже не совсем хорошая практика.