我想创建一个待办事项，但在创建待办事项后，我不想刷新所有列表，但在创建发布请求时，它也会创建刷新和获取请求

const App = () => {
  const dispatch = useDispatch()
  const [hamburgerMenu, setHamburgerMenu] = useState(false);

  const { authReducer } = useSelector(state => state)

  useEffect(() => {
    dispatch(refreshToken())
  }, [dispatch])

  return (
    <Router>
      <Alert />
      <Navbar
        hamburgerMenu={hamburgerMenu}
        setHamburgerMenu={setHamburgerMenu}
      />
      <Menu
        hamburgerMenu={hamburgerMenu}
        setHamburgerMenu={setHamburgerMenu}
      />
    
      <Routes>
        <Route exact path="/login" element={<Login />} />
        <Route exact path="/register" element={<Register />} />
        {<Route exact path="/" element={!authReducer?.access_token ? <HomepageLogout/> : <Homepage/>} /> }
      </Routes>
    </Router> 
  )
}

export default App

import { useEffect } from "react"
import TodoList from "../components/TodoList"
import { useSelector, useDispatch } from "react-redux"
import { getTodos } from "../redux/actions/todoAction"
import './styles/homepage.scss'

const Homepage = () => {
  const dispatch = useDispatch()

  const { authReducer, todoReducer } = useSelector((state) => state)
  const userId = authReducer?.user?.userId
  const access_token = authReducer?.access_token

  useEffect(() => {
    userId &&  dispatch(getTodos(userId))
  }, [userId, dispatch ]);

  const todoList = todoReducer?.data

  return (
    <div style={{ width: "100%", height: "100vh", display: 'flex', flexDirection: 'column', alignItems: "center", justifyContent: "center" }}>
      <TodoList  todoList={todoList} access_token={access_token} />
    </div>
  )
}

export default Homepage

import Todo from "./Todo"
import "./styles/todoList.scss"
import TodoForm from "./TodoForm"

const TodoList = ({ todoList, access_token, setIsAdded }) => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <div className="todoListContainer">
        <h1 className="title2">What are you planing for today?</h1>
        <ul className="todoListContainer__listContainer">
          {todoList &&
            todoList?.map((todo) => {
              return (
                <Todo todoList={todoList} todo={todo} key={todo?.todoId} access_token={access_token} />)
            })
          }
        </ul>
        <TodoForm todoList={todoList}  />
      </div>
    </div>
  )
}

export default TodoList

import { useState } from 'react'
import { useSelector, useDispatch } from "react-redux"
import { createTodo } from "../redux/actions/todoAction"
import "./styles/todoForm.scss"

const TodoForm = ({ todoList }) => {
  const dispatch = useDispatch()
  const { authReducer } = useSelector(state => state)

  const token = authReducer?.access_token
  const userId = authReducer?.user?.userId

  const initialState = {
    text: "",
    todoUserId: userId
  }

  const handleSubmit = (e) => {
    userId && dispatch(createTodo(todo, token, todoList))
  }

  const handleChange = (e) => {
    const { value, name } = e.target
    setTodo({
      ...todo,
      [name]: value
    })
  }

  const [todo, setTodo] = useState(initialState)

  return (
    <form className="todoForm" onSubmit={handleSubmit}>
      <input
        placeholder="Please add something.."
        id="text"
        name="text"
        type="text"
        value={todo?.text}
        onChange={handleChange}
      />
      <input
        id="todoUserId"
        name="todoUserId"
        value={todo?.todoUserId}
        readOnly
        style={{ display: 'none' }}
      />

      <button type="submit">
        Add
      </button>
    </form>
  )
}

export default TodoForm

待办事项操作

export const createTodo = (todo, token, todoList) => async (dispatch) => {
  try {
    const res = await postAPI("/todo/create", todo, token);
    dispatch({
      type: TODO,
      payload: {
        status: "success",
        message: "All todos found",
        data: todoList.append(todo)
      } 
    })
    dispatch({ type: ALERT, payload: { success: res.data.message } })
  } catch (error) {
    dispatch({ type: ALERT, payload: { errors: error?.response?.data.message } })
  }
};

后API

export const postAPI = async (url, post, token) => {
  const res = await axios.post(`/api/${url}`, post, {
    headers: { token: token }
  })

  return res
}

我已经尝试了todoList和useState()的不同数组方法，但它仍然创建了get和refresh请求。这对我来说很糟糕，因为当我创建一个todo时，access_token会有一秒钟变成undefined，所以列表消失了，出现了另一个组件。我想在列表下添加todo，而不刷新页面
这里是我创建待办事项后的日志

POST /api/todo/create 200 286.656 ms - 249
GET /api/refresh_token 200 200.426 ms - 408
GET /api/refresh_token 304 3.712 ms - -
GET /api/todo/get/emrekrt163395 200 4.840 ms - 7491
GET /api/todo/get/emrekrt163395 304 10.143 ms - -