从 apiCall 删除项目需要重新加载页面才能从客户端删除

2024-05-20 • 问答

我将 redux 工具包与 react native 和 mongodb (mongoose) 结合使用我删除了项目，它成功地从数据库中删除了但不在客户端，需要重新加载页面待办切片：

import {createSlice} from '@reduxjs/toolkit';

export const todoSlice = createSlice({
  name: 'todos',initialState: {
    todos: [],pending: null,error: null,},reducers: {
    deleteTodo: (state,action) => {
      return state
    },});
export const {deleteTodo} = todoSlice.actions;

export default todoSlice.reducer;

apiCall：

import axios from 'axios';
import {deleteTodo} from './todoSlice';

export const deleteoneTodo = async (id,dispatch) => {
  try {
    await axios.delete(`http://10.0.2.2:5000/todos/${id}`);
    dispatch(deleteTodo());
  } catch (err) {
    console.log(err);
  }
};

主要：

 const {todo} = useSelector(state => state);
  const dispatch = useDispatch();
  const {todos} = todo;
  useEffect(() => {
    getTodos(dispatch);
  },[]);

  const handleDelete = id => {
    deleteoneTodo(id,dispatch);
  };

你必须在你的 todoSlice 中实现 deleteTodo 以从你的本地状态中删除被删除的 id，

...
    export const todoSlice = createSlice({
      name: 'todos',initialState: {
        todos: [],pending: null,error: null,},reducers: {
        deleteTodo: (state,action) => {
          return state.filter((todo)=>todo.id!==action.payload.id);
        },});
  ...

当然，您必须使用要删除的待办事项的 ID 传递有效负载

export const deleteOneTodo = async (id,dispatch) => {
  try {
    await axios.delete(`http://10.0.2.2:5000/todos/${id}`);
    dispatch(deleteTodo({id:id}));
  } catch (err) {
    console.log(err);
  }
};

如果您仍有疑问，可以按照本教程进行操作：https://www.youtube.com/watch?v=fiesH6WU63I

我只是在“deleteOneTodo”中调用“getTodos” 并从减速器中删除“deleteTodo” 我希望这是一个很好的做法

export const deleteOneTodo = async (id,dispatch) => {
  try {
    await axios.delete(`http://10.0.2.2:5000/todos/${id}`);
     // i add this line => 
    getTodos(dispatch);
  } catch (err) {
    console.log(err);
  }
};

从 apiCall 删除项目需要重新加载页面才能从客户端删除

fang2fang 回答：从 apiCall 删除项目需要重新加载页面才能从客户端删除

大家都在问