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

Question

我试图向 api 发送一个参数来给我一个准确的 json 响应，但是当我试图通过 select onChange= 提交我的表单时{onAddSubmit}，它仍然传递默认值 146846，但我已经将我的 select 更改为 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 和 bootstrap 设计

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;

Answer 1

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

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

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

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

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

Delayed post parameters when submitting via onChange in reactjs

javascript

onchange

reactjs

axios