Reactjs MERN Redux堆栈根据用户的id问题删除用户。未处理的拒绝（TypeError）：无法读取属性'；id'；未定义的

在这一天，我试图发送一个axios.delete到我后端的一个路由，以便从数据库中删除一个用户

但是，我对如何访问用户id感到困惑。我正在使用React with redux。我得到了一个未定义的props.regauth.id

原谅我，我不知道我有多傻

这里是actions/index.js

import axios from 'axios';


const REG_USER_LOGOUT = 'req_logout_user';

export const regLogoutUser = () => {
        return async function (props, dispatch) {
                let id = Number(props.regauth.id)
                await axios
                .delete(`/api/users:${id}`)
                .then(res => dispatch({type: REG_USER_LOGOUT, payload: res }))
        }
}

在这个文件的底部附近，我试图使用正确的id访问onClick to dispatch（）中的props.regauth.id，以便我的动作创建者可以删除它

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { connect, useDispatch } from 'react-redux';
import { DropdownItem, DropdownMenu, DropdownToggle, Dropdown } from 'reactstrap';
import team3 from '../../assets/img/team/3.jpg';
import Avatar from '../common/Avatar';
import { regLogoutUser } from '../../actions/index';

const ProfileDropdown = (props) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const toggle = () => setDropdownOpen(prevState => !prevState);
  const dispatch = useDispatch();

  return (
    
    <Dropdown
      nav
      inNavbar
      isOpen={dropdownOpen}
      toggle={toggle}
      onMouseOver={() => {
        let windowWidth = window.innerWidth;
        windowWidth > 992 && setDropdownOpen(true);
      }}
      onMouseLeave={() => {
        let windowWidth = window.innerWidth;
        windowWidth > 992 && setDropdownOpen(false);
      }}
    >
      <DropdownToggle nav className="pr-0">
        <Avatar src={team3} />
      </DropdownToggle>
      <DropdownMenu right className="dropdown-menu-card">
        <div className="bg-white rounded-soft py-2">
          <DropdownItem className="font-weight-bold text-warning" href="#!">
            <FontAwesomeIcon icon="crown" className="mr-1" />
            <span>Go Pro</span>
          </DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#!">Set status</DropdownItem>
          <DropdownItem tag={Link} to="/dashboard/pages/profile">
            Profile &amp; account
          </DropdownItem>
          <DropdownItem href="#!">Feedback</DropdownItem>
          <DropdownItem divider />
          <DropdownItem tag={Link} to="/dashboard/pages/settings">
            Settings
          </DropdownItem>
          <DropdownItem tag={Link} onClick={() => { dispatch(regLogoutUser(props.regauth.id)) }}to="/authentication/basic/logout">
            Logout
          </DropdownItem>
        </div>
      </DropdownMenu>
    </Dropdown>
  );
};

const mapStateToProps = (state) => {
  return {
    regauth: state.regauth,
    auth: state.auth
  }
}

---

定义

regLogoutUser

的方式与调用方式不匹配。比较这两种方法，看看是否可以发现问题：

export const regLogoutUser = () => {
    return async function (props, dispatch) {
        let id = Number(props.regauth.id)
...

您正在使用id调用

regLogoutUser

，但它不接受任何参数

---

定义函数的正确方法是接受像

id

这样的参数作为外部函数的参数。内部函数将

dispatch

作为一个道具

您还将

async

/

await

和

Promise

/

组合在一起，这可能会造成混淆

试试这个：

export const regLogoutUser = (id) => {
    return async (dispatch) => {
        const res = await axios.delete(`/api/users:${id}`) // double check this path
        dispatch({type: REG_USER_LOGOUT, payload: res.data })
    }
}

dispatch(regLogoutUser(props.regauth.id))

export const regLogoutUser = (id) => {
    return async (dispatch) => {
        const res = await axios.delete(`/api/users:${id}`) // double check this path
        dispatch({type: REG_USER_LOGOUT, payload: res.data })
    }
}