如何解决通过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);
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。