Reactjs 通过API调用设置窗体的初始值

在我的React游戏中，我使用名为Formik的React库作为表单

在其中，您可以如下设置表单的初始值：

<Formik
    initialValues={{
        characterClasses: ["1", "3", "9"],
        race: "Elf",
        name: "Derolt",
        age: "84",
        
        ..etc
        

我的问题是，我不知道如何使用上面的fetch方法来实际填充Formik使用的initialValues部分

有人这样做过吗

---

谢谢

如果您使用的是类组件：

componentDidMount() {
    this.fetchGame();
}

async fetchGame() {
    const game = await fetchGameCharData(GAME_ID);
    this.setState({ game });
}
...
// in render method
const { game } = this.state;
...
<Formik
    initialValues={game}
...

const { game, setGame } = useState();

useEffect(async () => {
    const game = await fetchGameCharData(GAME_ID);
    setGame(game);
}, []);

...
// in return
<Formik
    initialValues={{
        characterClasses: ["1", "3", "9"],
        race: "Elf",
        name: "Derolt",
        age: "84",
        ...
    }}
    values={game}
...

componentDidMount（）{
这个。fetchGame（）；
}
异步fetchGame（）{
const game=wait fetchGameCharData（游戏ID）；
this.setState（{game}）；
}
...
//在渲染方法中
const{game}=this.state；
...
{
const game=wait fetchGameCharData（游戏ID）；
setGame（游戏）；
}, []);
...
//作为回报
使用方法

只有在收到API调用的响应后才能加载表单。显示
加载…
或自定义
微调器
，直到获得API响应

使用这种方法，表单直接加载
初始值
，而不会在第一次加载时出现没有值的闪烁，并且值会作为API响应的结果在一瞬间出现

编辑
//在您的状态中添加两个值，如
初始值：[]，
isValueLoded:错误
...
//在'componentDidMount'中进行API调用`
componentDidMount（）{
//调用您的API
fetchGameCharData（..）。然后（res=>{
this.setState（{isValueLoded:true，initialValues:res.values}）；
}).catch（err=>…）；
}
....
//在渲染方法中
render（）{
return！this.state.isValueLoed？
（装载…）：(
);
}
谢谢，但这是一个使用React钩子的功能组件…这个案例也被添加了一个我不知道的事情是Formik文档在单个项目上设置了值…比如。。。姓名：“Fred”，年龄：“30”，PlayerClass：“Wizard”…等等。每个属性值都被分配到相应的表单控件。我认为
值
比
初始值
更适合您的情况。我不确定我是否理解。所以我有我的API调用…如何运行并自动加载到InitialValue中？谢谢为您更新了示例代码。你可以根据自己的要求即兴创作@如果您正在使用
功能组件
，yash answer将为您提供帮助。方法同上。
const { game, setGame } = useState();

useEffect(async () => {
    const game = await fetchGameCharData(GAME_ID);
    setGame(game);
}, []);

...
// in return
<Formik
    initialValues={{
        characterClasses: ["1", "3", "9"],
        race: "Elf",
        name: "Derolt",
        age: "84",
        ...
    }}
    values={game}
...