reactjs - 通过 API 调用设置表单的初始值

Question

在我的 React 游戏中，我将一个名为 Formik 的 React 库用于表单。
在其中，您可以像这样设置表单的初始值:

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

但是现在，我想从 API 调用中加载初始值。
所以我创建了这个:

const fetchGameCharData = async (gameId) => {
    const game = await axios("api/games/" + gameId);
    // return the result
    return game;
};

我的问题是，我不知道如何使用上面的 fetch 方法来实际填充 Formik 使用的 initialValues 部分。
有没有人做过这个？
谢谢!

Answer 1

使用 conditional-rendering方法。
仅在您从 API 调用获得响应后加载您的表单。显示loading...或定制 spinner直到您收到 API 响应。

With this approach, your form directly load with initial values without any flickering of having no values at first load and values comes up in a flash as a result of API response.

编辑

// In your state add two values like
initialValues: [],
isValueLoded: false

...

// Make your API call in `componentDidMount`
componentDidMount() {
    // Call your API
    fetchGameCharData(....).then(res => {
        this.setState({ isValueLoded: true, initialValues: res.values});
    }).catch(err => ....);
}

....

// In your render method
render() {

    return !this.state.isValueLoded ?
       (<div>Loading...</div>) : (
        <Formki
          values={this.state.initialValues}
         ....
         />
    );
}