如何解决sweetalert2 成功和错误警报 :: 仅显示错误警报
我在获取 Sweetalert2 警报以在成功操作警报和错误之间切换时遇到了一些麻烦。它目前仅显示错误警报。
我不太确定我哪里出错了。我的代码如下：
- carsEdit.js
// Imported react libraries and hooks.
import React,{ useState } from "react";
// Requiring Axios.
import axios from "axios";
// Imported components from React Bootstrap.
import {
Button,Container,Form,FormGroup,FormControl,Formlabel,} from "react-bootstrap";
// Imported icons from FontAwesome.
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus,faEdit,faTrashAlt } from "@fortawesome/free-solid-svg-icons";
// Imported Swal from sweetalert2.
import Swal from "sweetalert2";
/**
* @param {*} cars
* @param {*} setCars
* Created a search component with an input area,dropdown menu for the categories and a search button.
* Set the initial states of the prop values using the useState() hook.
*/
const CarEdit = ({ cars,setCars }) => {
const [id,setId] = useState("");
const [Model,setModel] = useState("");
const [Make,setMake] = useState("");
const [Owner,setowner] = useState("");
const [Registration,setRegistration] = useState("");
const [Address,setAddress] = useState("");
const [prevIoUsOwners,setPrevIoUsOwners] = useState("");
/**
* Assigned an event.preventDefault() method to ensure that the page is not refreshed once the create function is executed.
* Fetching the content from http://localhost:8080/api/create. Utilizing the Post method and added a header to set the content type to JSON.
* Added the necessary props to alocate values to and stringified the content to be added to the JSON file.
* If successful a modal (Sweetalert2 - Swal.fire) will appear to confirm success and the content will be added to the UI as objects.
* If unsuccessful a modal (Sweetalert2 - Swal.fire) will appear displaying an error. An error will occur if all the information is not
* entered as set in the backend/ server side and the content will be returned unchanged.
* @param {*} e Posting content to JSON as a string and returning the content as objects to the UI.
*/
const create = (e) => {
e.preventDefault();
axios
.post("cars/create",{
Model,Make,Owner,Registration,Address,prevIoUsOwners,})
.then((response) => {
Swal.fire({
imageUrl: "./images/success.gif",imageWidth: 150,imageHeight: 150,imageAlt: "Success",confirmButtonColor: "#007aff",width: 400,title: "SUCCESS!",});
setCars(response.data);
})
.catch((error) => {
console.log(error);
Swal.fire({
imageUrl: "./images/exclamation.gif",imageAlt: "Error",confirmButtonColor: "#ff0000",title: "ERROR!",text: "User data missing",}).then(function () {
window.location.reload();
});
});
};
/**
* Assigned an event.preventDefault() method to ensure that the page is not refreshed once the update function is executed.
* Fetching the content from http://localhost:8080/api/update/ (an ID should be entered to update that specific car). Utilizing the
* Put method and added a header to set the content type to JSON.
* Added the necessary props to alocate values to and stringified the content to be added to the JSON file.
* If successful a modal (Sweetalert2 - Swal.fire) will appear to confirm success and the content will be added to the UI as objects.
* If unsuccessful a modal (Sweetalert2 - Swal.fire) will appear displaying an error. An error will occur if all the information is not
* entered as set in the backend/ server side and the content will be returned unchanged.
* @param {*} e Updating content,that exists in the JSON file,as a string and returning the content as objects to the UI.
*/
const updateOne = (e) => {
e.preventDefault();
axios
.put(`cars/updateOne/${id}`,{
Model: Model,Make: Make,Owner: Owner,Registration: Registration,Address: Address,prevIoUsOwners: prevIoUsOwners,as a string and returning the content as objects to the UI.
*/
const updateMany = (e) => {
e.preventDefault();
axios
.put(`cars/updateMany/${Model}`,{
Make: Make,})
.then((response) => {
console.log(response);
Swal.fire({
imageUrl: "./images/success.gif",});
setCars(response.data);
console.log(response.data);
})
.catch((error) => {
console.log(error);
Swal.fire({
imageUrl: "./images/exclamation.gif",}).then(function () {
window.location.reload();
});
});
};
/**
* Assigned an event.preventDefault() method to ensure that the page is not refreshed once the delete function is executed.
* Fetching the content from http://localhost:8080/api/delete/ (an ID should be entered to update that specific car). Utilizing the
* Delete method and added a header to set the content type to JSON.
* If successful a modal (Sweetalert2 - Swal.fire) will appear to confirm success and the content will be removed from the JSON file and UI.
* If unsuccessful a modal (Sweetalert2 - Swal.fire) will appear displaying an error.
* @param {*} e Deleting content that exists in the JSON file.
*/
const remove = (e) => {
e.preventDefault();
axios
.delete(`cars/delete/${id}`)
.then((response) => {
if (response.status === 200 && response.data === "Applied successfully")
Swal.fire({
imageUrl: "./images/success.gif",}).then(function () {
window.location.reload();
});
});
};
/**
* Added the handleChange() function to the onChange() event to set the new values of the props when values are entered into the input
* elements.
* Created buttons for the cars app. Passed onClick() events to create,update and delete cars.
* @returns Form with labels,input and button elements that can be used to add,update and delete cars.
*/
return (
<div>
<Container>
<Form className="d-flex flex-column">
<FormGroup>
<Formlabel htmlFor="id">ID:</Formlabel>
<FormControl
type="text"
name="id"
value={id}
onChange={(e) => setId(e.target.value)}
/>
</FormGroup>
<FormGroup>
<Formlabel htmlFor="model">Model:</Formlabel>
<FormControl
type="text"
name="model"
value={Model || ""}
onChange={(e) => setModel(e.target.value)}
/>
</FormGroup>
<FormGroup>
<Formlabel htmlFor="make">Make:</Formlabel>
<FormControl
type="text"
name="make"
value={Make || ""}
onChange={(e) => setMake(e.target.value)}
/>
</FormGroup>
<FormGroup>
<Formlabel htmlFor="owner">Owner:</Formlabel>
<FormControl
type="text"
name="owner"
value={Owner || ""}
onChange={(e) => setowner(e.target.value)}
/>
</FormGroup>
<FormGroup>
<Formlabel htmlFor="registration">Registration:</Formlabel>
<FormControl
type="text"
name="registration"
value={Registration || ""}
onChange={(e) => setRegistration(e.target.value)}
/>
</FormGroup>
<FormGroup>
<Formlabel htmlFor="address">Address:</Formlabel>
<FormControl
type="text"
name="address"
value={Address || ""}
onChange={(e) => setAddress(e.target.value)}
/>
</FormGroup>
<FormGroup>
<Formlabel htmlFor="prevIoUsOwners">PrevIoUs Owners:</Formlabel>
<FormControl
type="text"
name="prevIoUsOwners"
value={prevIoUsOwners || ""}
onChange={(e) => setPrevIoUsOwners(e.target.value)}
/>
</FormGroup>
<FormGroup>
<Button
type="button"
title="Add New Car"
onClick={(e) => create(e)}
>
<FontAwesomeIcon icon={faPlus} />
Add
</Button>
<Button
type="button"
title="Update a Car"
onClick={(e) => updateOne(e)}
>
<FontAwesomeIcon icon={faEdit} />
<span id="editone">x1</span> Update
</Button>
<Button
type="button"
title="Update Many Cars"
onClick={(e) => updateMany(e)}
>
<FontAwesomeIcon icon={faEdit} />
<span id="editmany">+</span> Update
</Button>
<Button
type="button"
title="Delete a Car"
onClick={(e) => remove(e)}
>
<FontAwesomeIcon icon={faTrashAlt} />
Delete
</Button>
</FormGroup>
</Form>
</Container>
</div>
);
};
// Exported CarEdit to App.js.
export default CarEdit;
- carsController.js
// Requiring the schemas that has been created in the carsModel.js file.
const Car = require("../models/carsModel.js");
// Requiring Mongoose.
const mongoose = require("mongoose");
/**
* POST/ CREATE:
* @required Body properties: Model,and the Address
* @param {*} req Creating a new post with the property.
* @param {*} res Updated copy of the content (copyContent).
* @returns List of cars and a confirmation message is returned to confirm that the post has been created or an error message should the
* request be unsuccessful.
*/
exports.createController = (req,res) => {
let car = new Car({
Model: req.body.Model,Make: req.body.Make,Owner: req.body.Owner,Registration: req.body.Registration,Address: req.body.Address,prevIoUsOwners: req.body.prevIoUsOwners,});
car
.save()
.then((cars) => res.json(cars))
.catch((err) => res.status(400).json("Error creating the car." + err));
};
/**
* GET/ READ:
* @required Content.
* @param {*} req Getting the array of cars.
* @param {*} res copy of the content (copyContent).
* @returns A list of the current cars that are already written.
*/
// Requesting all the cars' information from MongoDB and retuning the response with the information.
exports.getAllController = (req,res) => {
Car.find()
.then((cars) => res.json(cars))
.catch((err) =>
res.status(400).json("Error getting the cars' information." + err)
);
};
// Requesting all the cars' information from MongoDB and retuning the response with the information.
exports.getolderCars = (req,res) => {
Car.find({ Model: { $lt: 2016 } })
.then((cars) => res.json(cars))
.catch((err) =>
res.status(400).json("Error getting the cars' information." + err)
);
};
/**
* PUT/ UPDATE:
* @required Body properties: id.
* @param {*} req Post with the matching id to be returned and updated with the new post.
* @param {*} res Updated copy of the content (copyContent).
* @returns List of cars and a confirmation message is returned to confirm that the post has been updatedor an error message should the request
* be unsuccessful.
*/
// Fetching the information of one car by id for updating. Using $set to set the information for the relevant car with the matching id.
exports.updateOneController = (req,res) => {
Car.findOneAndUpdate(
req.params.id,{
$set: {
Model: req.body.Model,},{ new: true }
)
.then((cars) => res.json(cars))
.catch((err) => res.status(400).json("Error updating the car." + err));
};
// Allowing a user to update more than one car,using the model year of the car. Using $set to set the information for the relevant cars with
// the matching model years.
exports.updateManyController = (req,res) => {
Car.updateMany(
{
Model: req.params.Model,{
$set: {
Make: req.body.Make,}
)
.then((cars) => res.json(cars))
.catch((err) => res.status(400).json("Error updating the car." + err));
};
/**
* DELETE:
* @required Body properties: id.
* @param {*} req Post with the matching id to be deleted.
* @param {*} res Updated copy of the content (copyContent).
* @returns List of cars and a confirmation message is returned to confirm that the post has been deleted or an error message should the
* request be unsuccessful.
*/
// Fetching the information of one car by id for deletion.
exports.removeOneController = (req,res) => {
Car.findByIdAndRemove(req.params.id)
.then((cars) => res.json(cars))
.catch((err) => res.status(400).json({message: "Error deleting the car." + err}));
};
我还将完整应用程序的代码推送到 GitHub：https://github.com/ChanBos/Car-Database-App
如果有人愿意提供任何帮助，我将不胜感激。
解决方法
经过进一步研究，我设法找到了解决方案。
我已将代码更改如下：
- carsEdit.js
// Imported react libraries and hooks.
import React,{ useState } from "react";
// Requiring Axios.
import axios from "axios";
// Imported components from React Bootstrap.
import {
Button,Container,Form,FormGroup,FormControl,FormLabel,} from "react-bootstrap";
// Imported icons from FontAwesome.
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus,faEdit,faTrashAlt } from "@fortawesome/free-solid-svg-icons";
// Imported Swal from sweetalert2.
import Swal from "sweetalert2";
/**
* Set the initial states of the prop values using the useState() hook.
* @param {*} cars
* @param {*} setCars
*/
/**
* Used the useState() hook to set the initial values of the props.
* @returns The initial states of the prop values.
*/
const CarEdit = () => {
const [id,setId] = useState("");
const [Model,setModel] = useState("");
const [Make,setMake] = useState("");
const [Owner,setOwner] = useState("");
const [Registration,setRegistration] = useState("");
const [Address,setAddress] = useState("");
const [previousOwners,setPreviousOwners] = useState("");
/**
* Assigned an event.preventDefault() method to ensure that the page is not refreshed once the create function is executed.
* Fetching the content from http://localhost:8080/cars/create. Utilizing the Post method.
* Added the necessary props to alocate values to be written to the database.
* If successful a modal (Sweetalert2 - Swal.fire) will appear to confirm success and the content will be added to the UI as objects.
* If unsuccessful a modal (Sweetalert2 - Swal.fire) will appear displaying an error.
* @param {*} e Posting content to the database and returning the content as objects to the UI.
*/
const create = (e) => {
e.preventDefault();
axios
.post("cars/create",{
Model,Make,Owner,Registration,Address,previousOwners,})
.then((response) => {
Swal.fire({
imageUrl: "./images/success.gif",imageWidth: 150,imageHeight: 150,imageAlt: "Success",confirmButtonColor: "#007aff",width: 400,title: "SUCCESS!",text: response.data.message,}).then(function () {
window.location.reload();
});
})
.catch((error) => {
Swal.fire({
imageUrl: "./images/exclamation.gif",imageAlt: "Error",confirmButtonColor: "#ff0000",title: "ERROR!",text: error,}).then(function () {
window.location.reload();
});
});
};
/**
* Assigned an event.preventDefault() method to ensure that the page is not refreshed once the update function is executed.
* Fetching the content from http://localhost:8080/cars/updateOne/:id. Utilizing the Put method.
* Added the necessary props to alocate values to be written to the database.
* If successful a modal (Sweetalert2 - Swal.fire) will appear to confirm success and the content will be added to the UI as objects.
* If unsuccessful a modal (Sweetalert2 - Swal.fire) will appear displaying an error.
* @param {*} e Updating content of one car,that exists in the database,and returning the content as objects to the UI via the modal year.
*/
const updateOne = (e) => {
e.preventDefault();
axios
.put(`cars/updateOne/${id}`,{
Model: Model,Make: Make,Owner: Owner,Registration: Registration,Address: Address,previousOwners: previousOwners,text: error.response.data.message,}).then(function () {
window.location.reload();
});
});
};
/**
* Assigned an event.preventDefault() method to ensure that the page is not refreshed once the update function is executed.
* Fetching the content from http://localhost:8080/cars/updateMany/:id. Utilizing the Put method.
* Added the necessary props to alocate values to be written to the database.
* If successful a modal (Sweetalert2 - Swal.fire) will appear to confirm success and the content will be added to the UI as objects.
* If unsuccessful a modal (Sweetalert2 - Swal.fire) will appear displaying an error.
* @param {*} e Updating content of one car,and returning the content as objects to the UI via the model year.
*/
const updateMany = (e) => {
e.preventDefault();
axios
.put(`cars/updateMany/${Model}`,{
Make: Make,}).then(function () {
window.location.reload();
});
});
};
/**
* Assigned an event.preventDefault() method to ensure that the page is not refreshed once the delete function is executed.
* Fetching the content from http://localhost:8080/cars/delete/:id. Utilizing the Delete method.
* Added the necessary props to remove values from the database.
* If successful a modal (Sweetalert2 - Swal.fire) will appear to confirm success and the content will be added to the UI as objects.
* If unsuccessful a modal (Sweetalert2 - Swal.fire) will appear displaying an error.
* @param {*} e Deleting content that exists in the database via id.
*/
const remove = (e) => {
e.preventDefault();
axios
.delete(`cars/delete/${id}`)
.then((response) => {
Swal.fire({
imageUrl: "./images/success.gif",}).then(function () {
window.location.reload();
});
});
};
/**
* Added the props to be set when the onChange() event is triggered to set the new values of the props when values are entered into the input
* elements.
* Created buttons for the cars app. Passed onClick() events to create,update and delete cars.
* @returns Form with labels,input and button elements that can be used to add,update one or many cars and delete cars.
*/
return (
<div>
<Container>
<Form className="d-flex flex-column">
<FormGroup>
<FormLabel htmlFor="id">ID:</FormLabel>
<FormControl
type="text"
name="id"
value={id}
onChange={(e) => setId(e.target.value)}
/>
</FormGroup>
<FormGroup>
<FormLabel htmlFor="model">Model:</FormLabel>
<FormControl
type="text"
name="model"
value={Model || ""}
onChange={(e) => setModel(e.target.value)}
/>
</FormGroup>
<FormGroup>
<FormLabel htmlFor="make">Make:</FormLabel>
<FormControl
type="text"
name="make"
value={Make || ""}
onChange={(e) => setMake(e.target.value)}
/>
</FormGroup>
<FormGroup>
<FormLabel htmlFor="owner">Owner:</FormLabel>
<FormControl
type="text"
name="owner"
value={Owner || ""}
onChange={(e) => setOwner(e.target.value)}
/>
</FormGroup>
<FormGroup>
<FormLabel htmlFor="registration">Registration:</FormLabel>
<FormControl
type="text"
name="registration"
value={Registration || ""}
onChange={(e) => setRegistration(e.target.value)}
/>
</FormGroup>
<FormGroup>
<FormLabel htmlFor="address">Address:</FormLabel>
<FormControl
type="text"
name="address"
value={Address || ""}
onChange={(e) => setAddress(e.target.value)}
/>
</FormGroup>
<FormGroup>
<FormLabel htmlFor="previousOwners">Previous Owners:</FormLabel>
<FormControl
type="text"
name="previousOwners"
value={previousOwners || ""}
onChange={(e) => setPreviousOwners(e.target.value)}
/>
</FormGroup>
<FormGroup>
<Button
type="button"
title="Add New Car"
onClick={(e) => create(e)}
>
<FontAwesomeIcon icon={faPlus} />
Add
</Button>
<Button
type="button"
title="Update a Car"
onClick={(e) => updateOne(e)}
>
<FontAwesomeIcon icon={faEdit} />
<span id="editone">x1</span> Update
</Button>
<Button
type="button"
title="Update Many Cars"
onClick={(e) => updateMany(e)}
>
<FontAwesomeIcon icon={faEdit} />
<span id="editmany">+</span> Update
</Button>
<Button
type="button"
title="Delete a Car"
onClick={(e) => remove(e)}
>
<FontAwesomeIcon icon={faTrashAlt} />
Delete
</Button>
</FormGroup>
</Form>
</Container>
</div>
);
};
// Exported CarEdit to App.js.
export default CarEdit;
- carsController.js
// Requiring the schemas that has been created in the carsModel.js file.
const Car = require("../models/carsModel.js");
// Requiring Mongoose.
const mongoose = require("mongoose");
/**
* POST/ CREATE:
* @required Body properties: Model,and the Address
* @param {*} req Creating a new post with the property.
* @param {*} res Updated copy of the content (copyContent).
* @returns List of cars and a confirmation message is returned to confirm that the post has been created or an error message should the
* request be unsuccessful.
*/
exports.createController = (req,res) => {
let car = new Car({
Model: req.body.Model,Make: req.body.Make,Owner: req.body.Owner,Registration: req.body.Registration,Address: req.body.Address,previousOwners: req.body.previousOwners,});
car
.save()
.then((cars) => res.json({ message: "Car created successfully.",cars }))
.catch((err) => res.status(400).json("Error creating the car.",err));
};
/**
* GET/ READ:
* @required Content.
* @param {*} req Getting the array of cars.
* @param {*} res Copy of the content (copyContent).
* @returns A list of the current cars that are already written.
*/
// Requesting all the cars' information from MongoDB and retuning the response with the information.
exports.getAllController = (req,res) => {
Car.find()
.then((cars) => res.json(cars))
.catch((err) =>
res.status(400).json("Error getting the cars' information.",err)
);
};
// Requesting all the cars' information from MongoDB and retuning the response with the information.
exports.getOlderCars = (req,res) => {
Car.find({ Model: { $lt: 2016 } })
.then((cars) => res.json(cars))
.catch((err) =>
res.status(400).json("Error getting the cars' information.",err)
);
};
/**
* PUT/ UPDATE:
* @required Body properties: id.
* @param {*} req Post with the matching id to be returned and updated with the new post.
* @param {*} res Updated copy of the content (copyContent).
* @returns List of cars and a confirmation message is returned to confirm that the post has been updatedor an error message should the request
* be unsuccessful.
*/
// Fetching the information of one car by id for updating. Using $set to set the information for the relevant car with the matching id.
exports.updateOneController = (req,res) => {
Car.findOneAndUpdate(
req.params.id,{
$set: {
Model: req.body.Model,},{ new: true }
)
.then((cars) => res.json({ message: "Car updated successfully.",cars }))
.catch((err) => res.status(400).json("Error updating the car.",err));
};
// Allowing a user to update more than one car,using the model year of the car. Using $set to set the information for the relevant cars with
// the matching model years.
exports.updateManyController = (req,res) => {
Car.updateMany(
{
Model: req.params.Model,{
$set: {
Make: req.body.Make,}
)
.then((cars) => res.json({ message: "Cars updated successfully.",err));
};
/**
* DELETE:
* @required Body properties: id.
* @param {*} req Post with the matching id to be deleted.
* @param {*} res Updated copy of the content (copyContent).
* @returns List of cars and a confirmation message is returned to confirm that the post has been deleted or an error message should the
* request be unsuccessful.
*/
// Fetching the information of one car by id for deletion.
exports.removeOneController = (req,res) => {
Car.findByIdAndRemove(req.params.id)
.then((cars) => res.json({ message: "Car deleted successfully.",cars }))
.catch((err) =>
res.status(400).json({ message: "Error deleting the car.",err })
);
};
例如：
- carEdit.js
const remove = (e) => {
e.preventDefault();
axios
.delete(`cars/delete/${id}`)
.then((response) => {
if (response.status === 200 && response.data === "Applied successfully")
Swal.fire({
imageUrl: "./images/success.gif",});
setCars(response.data);
})
.catch((error) => {
console.log(error);
Swal.fire({
imageUrl: "./images/exclamation.gif",}).then(function () {
window.location.reload();
});
});
};
- carController.js
exports.removeOneController = (req,res) => {
Car.findByIdAndRemove(req.params.id)
.then((cars) => res.json(cars))
.catch((err) => res.status(400).json({message: "Error deleting the car." + err}));
};
...它应该是：
- carEdit.js
const remove = (e) => {
e.preventDefault();
axios
.delete(`cars/delete/${id}`)
.then((response) => {
Swal.fire({
imageUrl: "./images/success.gif",err })
);
};
所做的更改是由于 Axios 处理了一些默认已删除（最初使用）的功能。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。