React提交数据后用户列表不自动更新及useEffect死循环问题求解

• 异步请求时序错误：axios.post是异步方法，当前代码在发起POST请求后立刻调用allData拉取用户列表，此时POST请求还未完成写入数据库，拉取到的仍是更新前的旧数据，因此看不到最新提交的内容。
• 无限循环触发原因：allData是组件内部定义的普通函数，每次组件重渲染都会生成新的函数引用。如果将它放入useEffect依赖数组，每次渲染依赖都会变化触发useEffect执行，allData调用setUserList又会触发新一轮重渲染，最终形成死循环。
• 删除功能逻辑缺失：渲染的删除按钮未绑定对应的users_id到id属性，点击时e.target.id为空，删除请求无法正确执行，删除后也没有调用列表刷新方法。

1. 将POST、删除请求改为异步等待模式，确保数据写入数据库完成后再调用列表拉取方法，拿到最新数据
2. 使用useCallback包裹allData函数，稳定函数引用，避免不必要的重渲染和死循环
3. 给删除按钮绑定对应用户的users_id属性，删除操作完成后调用列表刷新方法实现自动更新
4. 建议补充请求异常捕获逻辑，避免请求出错时页面无反馈

import React from "react";
import { useState, useEffect, useCallback } from "react";
import axios from "axios";

const Form = () => {
  const [Username, setUsername] = useState("");
  const [Password, setPassword] = useState("");
  const [userList, setUserList] = useState([]);

  // 用useCallback包裹稳定函数引用
  const allData = useCallback(() => {
    axios.get("http://localhost:3001/api/alluser")
      .then((response) => {
        setUserList(response.data);
      })
      .catch(err => console.log("拉取用户列表失败：", err));
  }, []);

  useEffect(() => {
    allData();
  }, [allData]); // 此时加allData作为依赖也不会触发死循环

  const postdata = async () => {
    try {
      // 等待POST请求完成再拉取列表
      await axios.post("http://localhost:3001/api", {
        Username: Username,
        Password: Password,
      });
      allData();
      // 提交完成后清空输入框可选
      setUsername("");
      setPassword("");
    } catch (err) {
      console.log("提交用户失败：", err);
    }
  };

  const deletedata = async (e) => {
    try {
      const users_id = e.target.id;
      await axios.post("http://localhost:3001/api", {
        users_id: users_id,
      });
      // 删除完成后刷新列表
      allData();
    } catch (err) {
      console.log("删除用户失败：", err);
    }
  };

  const clickHandler = (e) => {
    deletedata(e);
  };

  return (
    <>
      <label name="Username">
        <input
          value={Username}
          onChange={(e) => setUsername(e.target.value)}
          type="text"
          name="Username"
          placeholder="Username"
        />
      </label>
      <label name="password">
        <input
          value={Password}
          onChange={(e) => setPassword(e.target.value)}
          type="text"
          name="Password"
          placeholder="Password"
        />
      </label>
      <button onClick={postdata}>Submit</button>
      <ul>
        {userList.map((val) => {
          return (
            <li key={val.users_id}>
              {val.users_id} - {val.Username}
              {/* 给删除按钮绑定对应用户id */}
              <button id={val.users_id} onClick={clickHandler}>
                Löschen
              </button>
            </li>
          );
        })}
      </ul>
    </>
  );
};

export default Form;

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