React表单刷新数据不显示及React 18 API警告问题求助

1. 刷新后Formik表单数据不显示修复 #

问题根源：初始渲染时异步获取的data可能还未加载完成，Formik的initialValues依赖data但未动态响应data的更新。即使设置了enableReinitialize: true，如果initialValues没有随data变化而更新，表单也不会重新初始化。

修改方案：

• 用useMemo包裹initialValues，将data作为依赖项，确保data加载完成后initialValues自动更新
• 结合enableReinitialize: true，Formik会在initialValues变化时重新初始化表单

代码修改：

import { useMemo } from 'react';

// ... 其他代码

const initialValues = useMemo(() => ({
    rewardname: data?.reward?.RewardName || '',
    rewarddescription: data?.reward?.RewardDescription || '',
    image: {
        preview: "",
        raw: ""
    },
    rewardvalue: data?.reward?.Points || '',
    quantity: data?.reward?.AvailableQuantity || '',
    file: undefined,
}), [data]); // 依赖data变化

const formik = useFormik({
    enableReinitialize: true,
    initialValues, // 使用上面的memo化值
    validationSchema: validationSchema,
    onSubmit: (values: any) => {
        // ... 原提交逻辑不变
    }
})

2. 刷新后图片无法加载修复 #

问题根源：useState的初始值只会执行一次，当页面刷新时data还未加载完成，data?.reward?.Media?.url为undefined，导致image初始值为http://localhost:3000undefined，是无效URL。且data加载完成后，image状态不会自动更新。

修改方案：

• 初始化image为空值，避免无效URL
• 用useEffect监听data?.reward?.Media?.url的变化，当数据加载完成后更新image状态

代码修改：

import { useEffect, useState } from 'react';

// ... 其他代码

const [image, setImage] = useState<string | null>(null); // 初始化为null

// 监听data变化，更新image
useEffect(() => {
    if (data?.reward?.Media?.url) {
        setImage(`http://localhost:3000${data.reward.Media.url}`);
    }
}, [data?.reward?.Media?.url]); // 依赖图片URL变化

3. React 18 ReactDOM.render警告修复 #

问题根源：React 18废弃了ReactDOM.render API，需要改用createRoot。

修改入口文件（通常是src/index.js或src/main.jsx）：

// 旧代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// 修改后的代码
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

额外建议：
如果data是通过useQuery等异步方式获取的，建议添加加载状态判断，在数据加载完成前显示加载组件，避免渲染空表单：

if (!data) {
    return <div>Loading...</div>; // 或自定义加载组件
}

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