React项目localhost无法渲染App.js出现白屏问题求助

白屏核心原因是React 18、Redux Toolkit、Material UI三个库的版本适配写法错误，控制台的combineReducers相关提示是store写法错误触发的警告，不是独立问题。按以下步骤修改即可恢复渲染：

1. 修复src/index.js（核心错误） #

当前代码有两个致命问题：

• 导入了React 18的react-dom/client API，却还在使用React 17及更早版本的ReactDOM.render写法，导致根节点挂载失败
• Redux Toolkit的configureStore参数格式和旧版createStore不兼容，手动传compose、applyMiddleware会导致store初始化失败，且RTK默认已经集成redux-thunk，不需要手动配置中间件

直接替换为以下代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import reducers from './reducers';

import App from './App';

const store = configureStore({
  reducer: reducers
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

2. 修复src/App.js的组件属性拼写错误 #

JSX中Material UI组件的自定义属性必须遵循驼峰命名，现有两处拼写错误会导致渲染异常：

• 最外层Container的maxidth="lg"应为maxWidth="lg"
• Grid容器的alignitems="stretch"应为alignItems="stretch"
• 额外优化：memories图片的height设为1460像素会导致页面被超长图片撑开，建议调整为合适尺寸比如height="60"

修正后的组件返回段代码：

return (
    <Container maxWidth="lg">
        <AppBar className={classes.AppBar} color="inherit">
            <Typography className={classes.heading} variant="h2" align='center'>Memories</Typography>
            <img className={classes.image} src={memories} alt="memories" height="60" />
            <h1>hello</h1>
        </AppBar>
        <Grow in>
            <Container>
                <Grid container justify="space-between" alignItems="stretch" spacing={3}>
                    <Grid item xs={12} sm={7}>
                        <Posts />
                    </Grid>
                    <Grid item xs={12} sm={4}>
                        <Form />
                    </Grid>
                </Grid>
            </Container>
        </Grow>
    </Container>
);

3. 可选功能修复（不影响白屏，但会导致新建帖子不显示） #

当前posts reducer的CREATE分支直接返回原数组，不会触发页面更新，修改src/reducers/posts.js对应逻辑：

export default (posts = [], action) => {
    switch (action.type) {
        case 'FETCH_ALL':
            return action.payload;
        case 'CREATE':
            return [...posts, action.payload];
        default:
            return posts;
    }
}

修改完成后重启开发服务，刷新页面即可正常看到App组件渲染内容，控制台的combineReducers相关警告也会同步消失。

内容的提问来源于stack exchange，提问作者alexzoo