React提交动态数据异常：始终返回静态数据的问题求助

你提交时获取到静态数据的核心原因是：handleAddTodo函数里的POST请求参数写死了固定字符串，没有使用输入框绑定的todo状态值。

修改方法 #

将handleAddTodo中的POST请求数据，从固定字符串改为使用状态变量todo，还可以新增空值校验避免提交空任务：

const handleAddTodo = () => {
  // 空值校验：避免提交空内容
  if (!todo.trim()) return;
  
  axios.post(`${BASE_URL}/todo/new`, { title: todo }) // 核心修改：替换为动态状态值
  .then((res) => {
    setTodos([...todos, res.data]);
    setTodo("");
  })
  .catch((err) => console.log("Error adding todo", err));
};

完整修改后的代码 #

import React, { useState, useEffect } from 'react';
import axios from "axios";
import deleteIcon from "./assets/delete.png";
import './App.modules.css';

const BASE_URL = "http://localhost:5000/api";

function App() {
  const [todos, setTodos] = useState(null);
  const [todo, setTodo] = useState("")

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

  const getTodos = () => {
    axios.get(`${BASE_URL}/todos`)
    .then((res) => setTodos(res.data))
    .catch((err) => console.log("Error getting todos", err))
  };

  const handleAddTodo = () => {
    if (!todo.trim()) return;
    axios.post(`${BASE_URL}/todo/new`, { title: todo })
    .then((res) => {
      setTodos([...todos, res.data]);
      setTodo("");
    })
    .catch((err) => console.log("Error adding todo", err));
  };

  const handleDeleteTodo = (id) => {
    axios
    .delete(`${BASE_URL}/todo/delete/${id}`)
    .then((res) => 
        setTodos(todos.filter((todo) => todo._id !== res.data._id))
    )
      .catch((err) => console.log(err));
  };

  const handleTodoClick = (id) => {
    axios.get(`${BASE_URL}/todo/toggleStatus/${id}`)
    .then((res) => getTodos())
    .catch((err) => console.log(err))
  };

  return (
    <div className="App">
    <div className='todo-input-wrapper'>
      <input 
        className='todo-input-bar'
        value={todo}
        onChange={(e) => setTodo(e.target.value)}
        placeholder='Add a New Todo Task'  />
        <div className='add-button' onClick={handleAddTodo}>
          +
        </div>
    </div>
    <div className='todos-list'>
      {!todos || !todos.length ? (
          <h2 style={{textAlign : "center" }}>No Tasks Yet Found</h2>
        ) : (
          todos.map((todo) => (
            <div className='todo' key={todo._id}>
              <span onClick={() => handleTodoClick(todo._id)}
              className={todo.complete ? "complete" : ""}
              id='todo-title' >
                {todo.title}
              </span>
              <span className='delete'
              onClick={()=> handleDeleteTodo(todo._id)}>
                <img src={deleteIcon} alt='delete' height="20px" width="20px" />
              </span>
            </div>
          ))
        )
      }
    </div>
 </div>
 )
}

export default App;

说明 #

输入框已经通过value={todo}和onChange事件绑定了todo状态，用户输入的内容会实时同步到todo变量中。修改POST请求参数后，提交时就会把用户输入的动态内容传给后端，解决静态数据的问题。

内容的提问来源于stack exchange，提问作者Saqib Rana