文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在使用react钩子单击表单提交时调用API并将结果存储在一个状态中

问如何在使用react钩子单击表单提交时调用API并将结果存储在一个状态中
EN

Stack Overflow用户

提问于 2021-10-17 12:10:59

回答 1查看 35关注 0票数 1

当使用钩子单击表单提交按钮时，如何调用API，然后将其JSON结果存储到某个状态？

在下面的代码中，我使用了一个form。当用户单击submit按钮时，将根据他们提供的参数调用API，但当我尝试以某种状态存储它时，我得到以下错误

import {useForm} from "react-hook-form";
import {useState, useEffect} from "react";

function Example() {

    const {register, handleSubmit} = useForm();
    const [storage, setStorage] = useState(null)

    const submitAction = async(data) => {
        let url = "..."
        url += data.param
        useEffect(async () => {
            setStorage(response.data...)
        }, [])
    }

    return (
        <div>
            <form onSubmit = {handleSubmit(submitAction)}>
                <select {...register('param')}>
                    <option value="something"> something </option>
                    ...
                </select>
                <button type={"submit"}submit</button>
            </form>
        </div>

    )
}

Unhandled Rejection (Error): Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

我一直在关注this post，据我所知，useEffect(...)必须排在submitAction之前。在useEffect中，我根据一个布尔变量call API if boolean var = true锁定API调用。但是我不确定我应该如何传递API所需的参数。

reactjs

react-hooks

回答 1

Stack Overflow用户

发布于 2021-10-17 12:33:20

您应该定义async函数，然后在useEffect或onEvent中使用它们。

同时使用async和await。

import {useState, useEffect} from "react";
import axios from axios;

const Component = () => {
    const fetchData = async () => {
        try {
            const { data } = await axios.get/post(...);
        } catch (e) {
            console.log(e)
        }
    };

    useEffect(() => {
        fetchData();
    }, []);
}

如果您想通过单击来调用API

HTML

<form onSubmit={fetchData}>
    ...
</form>

Javascript

import {useState, useEffect} from "react";
import axios from axios;

const Component = () => {
    const [data, setData] = useState([]);

    const fetchData = async (e) => {
        e.preventDefault();

        try {
            const { data } = await axios.get/post(...);
        } catch (e) {
            console.log(e)
        }
    };
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69604209

复制

相似问题

问如何在使用react钩子单击表单提交时调用API并将结果存储在一个状态中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在使用react钩子单击表单提交时调用API并将结果存储在一个状态中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在使用react钩子单击表单提交时调用API并将结果存储在一个状态中
EN