通过 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;
};

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

有人做过吗？

谢谢！

Answer 1

如果您正在使用 class 组件：

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 要求对象具有表单所需的所有属性。

Answer 2

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

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

Setting initial values of a form via an API call

reactjs

formik

react-hooks

编辑