通过 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 响应。

使用这种方法，您的表单可以直接使用initial values 加载，而不会在第一次加载时出现没有任何值的闪烁，并且由于 API 响应，值会在瞬间出现。

编辑

// 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}
         ....
         />
    );
}

Answer 2

如果你使用的是类组件：

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}
...

确保仅在game 可用时才呈现Formik。 否则会出错，因为initialValues 要求对象具有表单所需的所有属性。