Блог

Главная - Вопросы по программированию - Параметры отложенной публикации при отправке через onChange в reactjs

Параметры отложенной публикации при отправке через onChange в reactjs

#javascript #reactjs #axios #onchange

#javascript #reactjs #axios #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;

Комментарии:

1. Не уверен (не могу проверить сейчас), но я думаю, это потому, что вы используете onChange вместо onSubmit. Возможно, это запуск формы onChange перед выбором onChange

2. да, это работает, когда я использовал <тип кнопки=»отправить»> и <форма onSubmit={onAddSubmit} /> это отражает значение по умолчанию или то, что я изменил в своей форме, когда я нажимаю свою кнопку, но я хочу, чтобы при изменении любого из моих типов ввода он отправлял параметры в api и сразу же дать ответ, но прямо сейчас он не работает, мои allValues не отражают изменения при отправке с помощью my onChange.

Ответ №1:

Я уже понял это, я просто добавил allValues в качестве параметра при вызове onAddSubmit в моем перехватчике useEffect, и если в списке allValues что-то изменится, он автоматически отправит запрос в API и выдаст ответ.

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

И функция onAddSubmit, просто измените …Все значения относятся к … данным о параметре api, который отправляет запрос в 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);
        }
    };
Метки: