Кнопка все еще освежает страницу с остановкой события и предотвращение ⇐ Javascript

[Anonymous]

У меня есть проблема, когда нажатие кнопки обновляет страницу. Я даже снял кнопку и непосредственно положил значок и onclick на TD и использовал Event.preventDefault () и Event.stoppropagation (), но обновление все еще происходит. В остальной части проекта нет проблем, и я также использовал Browserrouter в основном файле. На той же странице у меня также была кнопка для поиска, которая была внутри формы, и она не вызвала никаких проблем.
export default function UsersList() {
const users = useSelector((state) => state.users);
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchAllUsers());
}, []);

function handleDeleteUser(e, id) {
// has refreshing problem
e.stopPropagation();
e.preventDefault();
dispatch(deleteUser({ id }));
}

return (


{users.usersList.length === 0 ? (
no user
) : (


{users.usersList.map((user) => {
return (


{user.fName}


{user.lName}


{user.phone}


{user.email}


{user.username}

handleDeleteUser(e, user.id)}>

);
})}


)}


);
}
< /code>
Slice пользователей: < /p>

const initialUser = {
fName: "",
lName: "",
username: null,
pass: null,
phone: "",
email: "",
age: 0,
isAuth: false,
};
const initialState = {
singleUser: initialUser,
usersList: [],
loading: false,
error: null,
};

const isPendingAction = (action) => action.type.endsWith("/pending");
export const deleteUser = createAsyncThunk(
"users/deleteUser",
async (payload, { rejectWithValue }) => {
try {
const res = await axios.request({
method: "delete",
url: HOST + "/" + payload.id,
});
return res;
} catch (e) {
return rejectWithValue(e.messege);
}
}
);
const usersReducer = createSlice({
name: "users",
initialState,
reducers: {},
extraReducers: (builder) => {
// ...
//deleteUser
builder.addCase(deleteUser.fulfilled, (state, action) => {
state.loading = false;
state.usersList = state.usersList.filter(
(user) => user.id !== action.payload.id
);
state.error = null;
});
builder.addCase(deleteUser.rejected, (state, action) => {
state.loading = false;
state.error = action.payload;
state.usersList = [];
});
builder.addMatcher(isPendingAction, (state) => {
state.loading = true;
});
},
}); `


Подробнее здесь: https://stackoverflow.com/questions/795 ... entdefault