useEffect不会在单击时刷新页面内容

Question

一切都正常，但不是应该的。我搜索了互联网，但没有找到导致这个问题的解决方案。据我所知，我做每件事都是按照"；书"；。

我正在建立一个电子商务页面。在"管理"页面上，我可以添加/编辑/从产品列表中删除产品。当我删除产品时，它会被删除，但我只有在刷新页面时才会看到，而不是在单击删除按钮时。我希望在删除该产品时看到该产品从列表中删除。

我尝试使用window.location.reload(true(；in useEffect在if语句中。我与其他正在使用代码的人多次检查该代码。我尝试了不同的浏览器。这没用。也许，我忽略了一些非常简单的事情。

我的代码如下：

产品列表屏幕

const productDelete = useSelector(state => state.productDelete);
const { loading: loadingDelete, error: errorDelete, success: successDelete } =  productDelete;
useEffect(() => {
if (successDelete) {
dispatch({ type: PRODUCT_DELETE_RESET });
}
dispatch(listProducts());
}, [dispatch, successDelete]);
const deleteHandler = (product) => {
if(window.confirm('Are you sure to delete?')){
dispatch(deleteProduct(product._id));
}
};
// some fancy code that maps over the product list and displays it along with the delete button
<button
type="button"
className="small"
onClick={() => deleteHandler(product)}
>
Delete
</button>

删除操作处理程序

export const deleteProduct = (productId) => async (dispatch, getState) => {
dispatch({ type: PRODUCT_DELETE_REQUEST, payload: productId });
const {
userSignin: { userInfo },
} = getState();
try {
await axios.delete(`/api/products/${productId}`, {
headers: { Authorization: `Bearer ${userInfo.token}` },
});
dispatch({ type: PRODUCT_DELETE_SUCCESS });
} catch (error) {
const message =
error.response && error.response.data.message
? error.response.data.message
: error.message;
dispatch({ type: PRODUCT_DELETE_FAIL, payload: message });
}
};

动作减速器

export const productDeleteReducer = (state = {}, action) => {
switch(action.type){
case PRODUCT_UPDATE_REQUEST:
return { loading: true };
case PRODUCT_DELETE_SUCCESS:
return { loading: false, success: true };
case PRODUCT_DELETE_FAIL:
return { loading: false, error: action.payload };
case PRODUCT_DELETE_RESET:
return {};
default:
return state;
}
}

删除路由器

productRouter.delete(
'/:id',
isAuth,
isAdmin,
expressAsyncHandler(async (req, res) => {
const product = await Product.findById(req.params.id);
if (product) {
const deleteProduct = await product.remove();
res.send({ message: 'Product Deleted', product: deleteProduct });
} else {
res.status(404).send({ message: 'Product Not Found' });
}
})
);
export default productRouter;

存储

combine the reducer with the action handler in the store

我们非常感谢您的帮助。

Answer 1

在我的代码中搜索了更长的时间后，我发现答案在存储文件中。我使用了autoimport，但它没有使用正确的函数(productDelete: productDeleteReducer(连接reducer，而是连接到另一个reducer。这当然造成了这种奇怪的影响。