Question

我不知道自己在做什么，但是我正在尝试实现某种侧边栏菜单，当我单击菜单按钮时，该菜单会切换<main>标签中的内容。但是问题是，当我通过MainMenu的{{1}}阅读初始页面的内容时，页面会一直停滞直到最终告诉我React已经崩溃。

state标签：

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函数：

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
    })
};

同样，我可能做错了所有事情。但是我该怎么做才能使这项工作呢？

Answer 1

一些最佳实践提示。

您不应在状态中存储JSX元素。 JSX元素是执行类似<ComplexCardGrid />之类的结果的结果。这些仅应在呈现应用程序时创建和使用。
使用随机密钥将强制每个组件不断地卸载和重新安装。您需要找出一种正确的方法来确保键都是唯一的，并且在渲染之间不会改变。您可能可以为此使用数组索引，尽管这也不是最佳实践。

当访问组件状态时，React Page不断崩溃

1 个答案: