如何在 reactjs 中单击时依次调用两个函数.这两个函数都是异步的

Question

如何调用两个函数单击一个接一个

我的代码如下：

import React from "react";
import { Modal, Button } from "react-bootstrap";
const DeleteModal = ({
show,
handleClose,
deleteModalData: { type, id },
deleteFn,
loading,
dishData,
setDishData,
}) => {
const removeIngredient = async () => {
let restIngredients = dishData.ingredients.filter(
(ingredient) => ingredient.ingredient_id !== id
);
setDishData({ ...dishData, ingredients: [...restIngredients] });
};
return (
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Delete {type}</Modal.Title>
</Modal.Header>
<Modal.Body>Are you sure you want to delete this {type}?</Modal.Body>
<Modal.Footer>
<Button variant="outline-secondary" onClick={handleClose}>
No
</Button>
<Button
variant="primary"
onClick={() => {
removeIngredient();
deleteFn();
}}
disabled={loading}
>
Yes {loading ? "..." : null}
</Button>
</Modal.Footer>
</Modal>
);
};
export default DeleteModal;

在上述组件的父组件中，我定义了 props deleteFn 和 setDishData，如下所示：

删除Fn

const deleteFn = () => {
saveIngredients();
};
const filteredIngredientData = () =>
/**
* filteredIngredientData - filters out the fields (from ingredients object) that are required by the API
*/
ingredients
?.reduce((acc, val) => {
return [
acc,
{
ingredient_quantity: val.ingredient_quantity,
ingredient_id: val.ingredient_id,
is_required: val.is_required,
},
];
}, [])
.flat(Infinity);
const [loadingSaveIngredients, setLoadingSaveIngredients] = useState(false);
const [ingredientsUpdated, setIngredientsUpdated] = useState(false);
const saveIngredients = () => {
/**
* saveIngredients - Upload ingredients with updated quantities if any
*/
setLoadingSaveIngredients(true);
axios({
method: "PUT",
url: `${BASE_URL}/dishes/${props.match.params.id}/ingredients`,
data: { ingredients: filteredIngredientData() },
})
.then((res) => {
setLoadingSaveIngredients(false);
setShowDeleteModal(false);
setIngredientsUpdated(true);
})
.catch((err) => console.log(err));
};

设置DishData

const [dishData, setDishData] = useState({});

我也尝试过使用承诺，但没有运气。有什么简单的方法可以做到这一点吗？

我知道我必须以某种方式使用异步等待，但我无法理解我应该如何使用它。任何帮助将不胜感激:)

Answer 1

编辑：

所以我认为我实现错了; insead：

1. 当你调用setDishData时，也调用toggleRemoved来指示它在removeIngredients中被调用(如果这是调用setDishData的唯一地方，那么你不需要实现removed/toggleRemoved(

2. 然后在 useEffect 中调用 deleteFn，其中 dishData 是依赖项; 由于 deleteFn 依赖于 setDishData，并且 setDishData 会更改 dishData，因此更改完成后将触发 useEffect。

3. 在 deleteFn 中添加一个条件，用于检查删除是否为 true(仅当 setDishData 也从其他函数调用时才需要这样做，因为您不希望这些函数在 deleteFn 函数中触发 saveIngredients i(。

const [dishData, setDishData] = useState(0);
const [removed, toggleRemoved] = useState(false);
const removeIngredients = () => {
let restIngredients = dishData.ingredients.filter(
(ingredient) => ingredient.ingredient_id !== id
);
setDishData({ ...dishData, ingredients: [...restIngredients] });
toggleRemoved(true); 
}
useEffect(() => {
deleteFn(); 
}, [dishData]);

<button onClick={removeIngredients}>

const deleteFn = () => {
if(removed){
saveIngredients();
toggleRemoved(false); 
}
};

Answer 2

import React from "react";

import { Modal, Button } from "react-bootstrap";

const DeleteModal = ({
show,
handleClose,
deleteModalData: { type, id },
deleteFn,
loading,
dishData,
setDishData,
}) => {
const removeIngredient = async () => {
let restIngredients = dishData.ingredients.filter(
(ingredient) => ingredient.ingredient_id !== id
);

setDishData({ ...dishData, ingredients: [...restIngredients] });
};

//new function
function myFun(){
removeIngredient();
dFun();          
}
function dFun(){
deleteFn();
}
return (
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Delete {type}</Modal.Title>
</Modal.Header>
<Modal.Body>Are you sure you want to delete this {type}?</Modal.Body>
<Modal.Footer>
<Button variant="outline-secondary" onClick={handleClose}>
No
</Button>
<Button
variant="primary"
onClick={() => myFun()}
disabled={loading}
>
Yes {loading ? "..." : null}
</Button>
</Modal.Footer>
</Modal>
);
};

export default DeleteModal;