通过reactjs中的onChange提交时延迟发布参数

问题描述

我正在尝试向 api 发送一个参数以给我一个确切的 json 响应，但是当我尝试通过 select onChange={onAddSubmit} 提交我的表单时，它仍然传递默认值 146846 但我已经将我的选择更改为 146847，因此我收到了无效响应。

Home.js

import React,{ useEffect,useState } from "react";
import Api from "../Api";

import AppContainer from "../tmp/AppContainer";
import HomeContainer from "./HomeContainer";

const Home = () => {
    const [posts,setPosts] = useState();
    const [loading,setLoading] = useState(false);
    const [allValues,setAllValues] = useState({
        contractId: "146846",planId: "1028",dateStart: "2021-01-30",dateEnd: "2021-01-31",numberOfAdults: 1,numberOfChildren: 0,planoption: "Individual",unit: "day",});
    const changeHandler = (e) => {
        setAllValues({ ...allValues,[e.target.name]: e.target.value });
    };

    const onAddSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        try {
            await Api.getCurlPost({
                ...allValues,}).then((response) => {
                const result = response.data;
                setPosts(result.data);
            });
        } catch {
            alert("Failed to add post!");
        } finally {
            setLoading(false);
        }
    };
    useEffect(() => {
        onAddSubmit;
    },[]);

    return (
        <AppContainer>
            <HomeContainer
                onAddSubmit={onAddSubmit}
                changeHandler={changeHandler}
                loading={loading}
                posts={posts}
            />
        </AppContainer>
    );
};

export default Home;

这是我的 HomeContainer.js，其中包含我的 html 和引导程序设计

import React,{ Component } from "react";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlane } from "@fortawesome/free-solid-svg-icons";
import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";

class HomeContainer extends Component {
    render() {
        const { onAddSubmit,changeHandler,loading,posts } = this.props;
        return (
            <div>
                <div className="row mb-auto">
                    <div className="col-md-6 p-2">
                        <img
                            width="100%"
                            src="../resources/img/starr/7437.jpg"
                        />
                        <div className="mt-3 shadow-sm p-3 mb-5 bg-white rounded">
                            <h3 className="text-center">
                                <FontAwesomeIcon
                                    icon={faPlane}
                                    rotation={0}
                                    style={{ marginRight: 5 }}
                                />
                                Travel Details
                            </h3>
                            <form onChange={onAddSubmit}>
                                <div className="form-group">
                                    <select
                                        className="form-control"
                                        name="contractId"
                                        onChange={changeHandler}
                                    >
                                        <option value="146846">
                                            TravelLead Domestic Travel Insurance
                                        </option>
                                        <option value="146847">
                                            TravelLead International Travel
                                            Insurance
                                        </option>
                                    </select>
                                </div>
                                <div className="form-group">
                                    <select
                                        className="form-control"
                                        name="planId"
                                        onChange={changeHandler}
                                    >
                                        <option value="1028">
                                            Economy (Single Trip)
                                        </option>
                                        <option value="1029">
                                            Elite (Single Trip)
                                        </option>
                                    </select>
                                </div>
                            </form>    
                       </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default HomeContainer;

解决方法

我已经想到了，我只是在 useEffect 钩子上调用 onAddSubmit 时添加了 allValues 作为参数，如果 allValues 列表发生变化，它会自动向 API 提交请求并抛出响应。

    useEffect(() => {
        onAddSubmit(allValues);
    },[allValues]);

和 onAddSubmit 函数，只需在向 axios 发送请求的 api 参数上将 ...allValues 更改为 ...data。

const onAddSubmit = async (data) => {
        setLoading(true);
        try {
            await Api.getCurlPost({
                ...data,}).then((response) => {
                const result = response.data;
                setPosts(result.data);
            });
        } catch {
            alert("Failed to add post!");
        } finally {
            setLoading(false);
        }
    };