javascript - 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. 使用随 secret 钥将强制每个组件不断卸载和重新安装。您需要找出一种正确的方法来确保键都是唯一的并且不会在渲染之间更改。您可能只为此使用数组索引，尽管这也不是最佳做法。