Javascript 在reactjs中通过onChange提交时延迟post参数

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

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

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;

import React，{useffect，useState}来自“React”；
从“./Api”导入Api；
从“./tmp/AppContainer”导入AppContainer；
从“/HomeContainer”导入HomeContainer；
常量Home=（）=>{
const[posts，setPosts]=useState（）；
const[loading，setLoading]=useState（false）；
常量[allValues，setAllValues]=useState({
缩写：“146846”，
planId:“1028”，
开始日期：“2021-01-30”，
日期结束：“2021-01-31”，
成人人数：1，
儿童人数：0，
计划选项：“个人”，
单位：“天”，
});
常量changeHandler=（e）=>{
setAllValues（{…allValues，[e.target.name]：e.target.value}）；
};
const onAddSubmit=async（e）=>{
e、 预防默认值（）；
设置加载（真）；
试一试{
等待Api.getCurlPost({
…所有价值观，
})。然后（（响应）=>{
const result=response.data；
设置柱（结果数据）；
});
}抓住{
警报（“添加帖子失败！”）；
}最后{
设置加载（假）；
}
};
useffect（（）=>{
奥纳德苏米特；
}, []);
返回(
);
};
导出默认主页；

这是我的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;

import React，{Component}来自“React”；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
从“@fortawesome/free solid svg icons”导入{faPlane}”；
从“@fortwome/free solid svg icons”导入{faCircleNotch}”；
类HomeContainer扩展组件{
render（）{
const{onAddSubmit，changeHandler，load，posts}=this.props；
返回(
旅行详情
TravelLead国内旅行保险
TravelLead国际旅行社
保险
经济舱（单程）
精英（单程）
);
}
}
导出默认HomeContainer；

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

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

在addsubmit函数中，只需将向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);
        }
    };

---

不确定（现在无法测试），但我认为这是因为您使用的是onChange，而不是onSubmit。可能是在选择onChange之前触发Form onChange是的，它在我使用时起作用，它反映了默认值或我单击按钮时在表单中更改的内容，但我想要的是，当我更改任何输入类型时，它会将参数发送到api并立即给出响应，但是现在它不起作用了。当使用我的onChange提交它时，我的allValues没有反映更改。