下面是我adduserreact组件

import axios from "axios";
import { useState } from "react";

const AddUserData: React.FC<{ getUserAxios: () => void }> = ({
  getUserAxios,
}) => {
  const [Name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassWord] = useState("");
  const [userId, setUserId] = useState(1);

  const getUserData = () => {
    const newUserData = {
      id:userId,
      Name,
      email,
      password,
    };
    axios({
      method: "post",
      url: "http://localhost:3001/addNewUser",
      data: newUserData,
    })
      .then(function (response) {
        console.log(response);
        setTimeout(() => {
          getUserAxios();
        }, 1000);
      })
      .catch(function (error) {
        console.log(error);
      });
    setName("");
    setEmail("");
    setPassWord("");
     setUserId((prevUserId) => prevUserId + 1);
  };
  return (
    <>
      <form>
        <div className="input-group mb-3">
          <span className="input-group-text" id="basic-addon1">
            🙂
          </span>
          <input
            type="text"
            className="form-control"
            placeholder="User Firstname"
            aria-label="User Firstname"
            aria-describedby="basic-addon1"
            value={Name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div className="input-group mb-3">
          <span className="input-group-text" id="basic-addon1">
            🔑
          </span>
          <input
            type="text"
            className="form-control"
            placeholder="User Lastname"
            aria-label="User Lastname"
            aria-describedby="basic-addon1"
            value={password}
            onChange={(e) => setPassWord(e.target.value)}
          />
        </div>
        <div className="input-group mb-3">
          <span className="input-group-text" id="basic-addon2">
            💌
          </span>
          <input
            type="text"
            className="form-control"
            placeholder="Users Email"
            aria-label="Users Email"
            aria-describedby="basic-addon2"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <button
          type="button"
          className="btn btn-primary mx-2"
          onClick={getUserData}
        >
          Add
        </button>
        <button type="button" className="btn btn-secondary">
          Cancel
        </button>
      </form>
    </>
  );
};

export default AddUserData;

这是我的另一个组合

import axios from "axios";
import { useEffect, useState } from "react";
import AddUserData from "../AddUserData/AddUserData";
import { UserType } from "../store/stype-store";

const UserDataTable = () => {
  const [users, setUsers] = useState <UserType[]>([]);

  const getUserAxios = () => {
    axios
      .get("http://localhost:3001/usersData")
      .then((res) => {
        console.log("Response from axios", res.data);
        const { allUsers } = res.data;
        console.log("allUsers from axios", allUsers);
        setUsers(allUsers);
      })
      .catch((err) => {
        console.log("err from axios", err.message);
      });
  };
  useEffect(() => {
    getUserAxios();
  }, []);

  const userMap = users.map((user: UserType, index) => {
    return (
      <tr key={user.id}>
        <th scope="row">{index}</th>
        <td>{user.Name}</td>
        <td>{user.password}</td>
        <td>{user.email}</td>
      </tr>
    );
  });

  return (
    <>
      <div className="col-lg-7 p-3 p-lg-5 pt-lg-3 ">
        <table className="table table-striped">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">Name</th>
              <th scope="col">Password</th>
              <th scope="col">E-Mail</th>
            </tr>
          </thead>
          <tbody>{userMap}</tbody>
        </table>
      </div>
      <div className="col-lg-4 p-3 p-lg-5 pt-lg-3">
        <AddUserData getUserAxios={getUserAxios} />
      </div>
    </>
  );
};

export default UserDataTable;

这是我的节点服务器

const express = require("express");
const cors = require("cors");
const app = express();

const port = 3001;

app.use(express.json());
app.use(
  cors({
    origin: "*",
  })
);

let previousUserData = [
  {
    id: 1,
    Name: "RAHUL",
    password: "1w2e2w",
    email: "affj@gmail.com",
  },
  {
    id:2,
    Name: "CHAHUL",
    password: "1w2e2w",
    email: "affj@gmail.com",
  },
];

app.get("/usersData", (req, res) => {
  res.send({ status: 200, allUsers: previousUserData });
});

app.post("/addNewUser", (req, res) => {
  const { id, Name, password, email } = req.body;
  if (Name && password && email) {
    previousUserData = [...previousUserData, { id, Name, password, email }];
    res.send({ status: 200, msg: "user added", allUsers: previousUserData });
  } else {
    res.send({ status: 500, msg: "something went wrong" });
  }
});

app.listen(port, () => {
  console.log("Server started on port " + port);
});

我想给予每个用户一个唯一的id，如果我们添加另一个，也要删除关键属性值