JavaScript React Redux:如果不先刷新，则无法删除网页上的项目

我有下面的当前网页，当我点击卡片顶部的红色“x”按钮时，我想删除一个用户

目前，在我单击“x”删除按钮后，什么也没有发生。刷新页面后，该用户将从我的网页中删除。但我希望这一切都不需要刷新

网页呈现示例：

后端路线：

为此，我尝试了以下方法：

设置后端路由：

    const router = require('express').Router()
    const {User} = require('../db/models')
    module.exports = router
    const {isUser, isAdmin} = require('../checks')
    // 8080/api/users/:userId

    router.delete('/:userId', isAdmin, async (req, res, next) => {
      let userId = req.params.userId

      try {
        await User.destroy({
          where: {
            id: userId
          }
        })
        res.status(204)
      } catch (err) {
        next(err)
      }
    })

    import axios from 'axios'

    // ACTION TYPES

    const SET_USERS = 'SET_USERS'
    const DELETE_USER = 'DELETE_USER'

    // ACTION CREATORS

    export const setUsers = users => ({
      type: SET_USERS,
      users: users
    })

    export const deleteUser = delUserId => ({
      type: DELETE_USER,
      delUserId: delUserId
    })

    // DOLLAR HELPER FOR CENTS FIELD

    // export const toDollars = cents => {
    //   return `$${(cents / 100).toFixed(2)}`
    // }

    // THUNK CREATORS

    export const getUsers = () => async dispatch => {
      try {
        const {data} = await axios.get('/api/users')
        dispatch(setUsers(data))
        console.log('getUsersThunk DATA ARRAY', data)
      } catch (err) {
        console.error(err)
      }
    }

    export const deleteUserThunk = delUserId => async dispatch => {
      try {
        const response = await axios.delete(`/api/users/${delUserId}`)
        const deleteUserId = response.data

        dispatch(deleteUser(deleteUserId))
        console.log('getUsersThunk DELETE', deleteUserId)
      } catch (err) {
        console.error(err)
      }
    }

    // REDUCER

    // INITIAL STATE

    const allUsers = []

    export default function(state = allUsers, action) {
      switch (action.type) {
        case SET_USERS:
          return action.users
        case DELETE_USER: {
          let userRemovalArray = state.filter(user => user.id !== action.delUserId)
          return userRemovalArray
        }
        default:
          return state
      }
    }

设置redux存储并点击：

    const router = require('express').Router()
    const {User} = require('../db/models')
    module.exports = router
    const {isUser, isAdmin} = require('../checks')
    // 8080/api/users/:userId

    router.delete('/:userId', isAdmin, async (req, res, next) => {
      let userId = req.params.userId

      try {
        await User.destroy({
          where: {
            id: userId
          }
        })
        res.status(204)
      } catch (err) {
        next(err)
      }
    })

    import axios from 'axios'

    // ACTION TYPES

    const SET_USERS = 'SET_USERS'
    const DELETE_USER = 'DELETE_USER'

    // ACTION CREATORS

    export const setUsers = users => ({
      type: SET_USERS,
      users: users
    })

    export const deleteUser = delUserId => ({
      type: DELETE_USER,
      delUserId: delUserId
    })

    // DOLLAR HELPER FOR CENTS FIELD

    // export const toDollars = cents => {
    //   return `$${(cents / 100).toFixed(2)}`
    // }

    // THUNK CREATORS

    export const getUsers = () => async dispatch => {
      try {
        const {data} = await axios.get('/api/users')
        dispatch(setUsers(data))
        console.log('getUsersThunk DATA ARRAY', data)
      } catch (err) {
        console.error(err)
      }
    }

    export const deleteUserThunk = delUserId => async dispatch => {
      try {
        const response = await axios.delete(`/api/users/${delUserId}`)
        const deleteUserId = response.data

        dispatch(deleteUser(deleteUserId))
        console.log('getUsersThunk DELETE', deleteUserId)
      } catch (err) {
        console.error(err)
      }
    }

    // REDUCER

    // INITIAL STATE

    const allUsers = []

    export default function(state = allUsers, action) {
      switch (action.type) {
        case SET_USERS:
          return action.users
        case DELETE_USER: {
          let userRemovalArray = state.filter(user => user.id !== action.delUserId)
          return userRemovalArray
        }
        default:
          return state
      }
    }

构建调用“deleteUserThunk”的前端组件

import React from 'react'
import {connect} from 'react-redux'
import {getUsers, deleteUserThunk} from '../store/allUsers'
import {updateUserThunk, fetchSingleUser} from '../store/singleUser'
// Status Filter import BeerFilter from './BeerFilter'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import {UncontrolledCollapse} from 'reactstrap'

export class AllUsers extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      showForm: false,
      stat: ''
    }
    this.clickHandlerOne = this.clickHandlerOne.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  componentDidMount() {
    try {
      this.props.fetchInitialUsers()
    } catch (error) {
      console.error(error)
    }
  }

  clickHandlerOne() {
    let hidden = this.state.showForm
    this.setState({
      showForm: !hidden
    })
  }

  handleChange(event) {
    //console.log('event.target', event.target)
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  async handleSubmit(userId) {
    event.preventDefault()

    const updatedUser = {
      id: userId,
      isAdmin: this.state.stat
    }

    // console.log('UPDATE USER', updatedUser)

    await this.props.updateUserThunk(updatedUser)
    this.props.fetchInitialUsers()
  }

  render() {
    const users = this.props.users
    // console.log('PROPS', this.props)
    console.log('USERS', this.props.users)

    return (
      <div>
        {/* <div className="options">
          <select onChange={this.handleChange}>
            <option value="">Sort By...</option>
            <option value="priceHighToLow">Price (high to low)</option>
            <option value="priceLowToHigh">Price (low to high)</option>
            <option value="name">Name</option>
          </select>

          <BeerFilter />
          </div> */}

        <div className="flex-cards">
          {users.map(user => (
            <Card style={{width: '18rem'}} key={user.id}>
              {/* delete thunk */}
              <div>
                <Button
                  id={`delete${user.id}`}
                  variant="danger"
                  onClick={() => this.props.deleteUserThunk(user.id)}
                >
                  X
                </Button>
              </div>

              <Card.Body>
                <Card.Title>User Id: {user.id}</Card.Title>
                <Card.Text>
                  <div>
                    <ul>
                      <li>
                        <div className="highlight">
                          <img src={user.imageUrl} />
                        </div>
                        <div className="details">
                          <p>Username: {user.username}</p>
                          <p>User Email: {user.email}</p>
                          <p>Admin Status: {user.isAdmin ? 'true' : 'false'}</p>
                          <p>
                            Created Date:{' '}
                            {new Intl.DateTimeFormat('en-GB', {
                              month: 'short',
                              day: '2-digit',
                              year: 'numeric'
                            }).format(new Date(user.createdAt))}
                          </p>
                          <p />
                          <Button
                            id={`user${user.id}`}
                            onClick={() => {
                              this.clickHandlerOne()
                            }}
                            variant="outline-info"
                          >
                            Admin Status Toggle
                          </Button>
                          <UncontrolledCollapse toggler={`#user${user.id}`}>
                            <form onSubmit={() => this.handleSubmit(user.id)}>
                              <div>
                                <span>
                                  <select
                                    name="stat"
                                    value={this.state.isAdmin}
                                    onChange={this.handleChange}
                                  >
                                    <option value="">user isAdmin?</option>
                                    <option value="true">true</option>
                                    <option value="false">false</option>
                                  </select>
                                </span>

                                <div>
                                  {/* */}
                                  <button type="submit">Submit</button>
                                </div>
                              </div>
                            </form>
                          </UncontrolledCollapse>
                        </div>
                      </li>
                    </ul>
                  </div>
                </Card.Text>
              </Card.Body>
            </Card>
          ))}
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    users: state.allUsers
  }
}

const mapDispatchToProps = dispatch => {
  return {
    loadSingleUser: id => dispatch(fetchSingleUser(id)),
    updateUserThunk: updatedUser => dispatch(updateUserThunk(updatedUser)),
    //getSortedBeers: (sortBy, beers) => dispatch(sortBeers(sortBy, beers)),
    fetchInitialUsers: () => dispatch(getUsers()),
    deleteUserThunk: userId => dispatch(deleteUserThunk(userId))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(AllUsers)

从“React”导入React
从“react redux”导入{connect}
从“../store/allUsers”导入{getUsers，deleteUserThunk}
从“../store/singleUser”导入{updateUserThunk，fetchSingleUser}
//状态筛选器从“./BeerFilter”导入BeerFilter
从“react引导/卡”导入卡
从“反应引导/按钮”导入按钮
从“reactstrap”导入{UncontrolledCollapse}
导出类AllUsers扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
展示形式：假，
统计数据：“”
}
this.clickHandlerOne=this.clickHandlerOne.bind（this）
this.handleChange=this.handleChange.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
}
componentDidMount（）{
试一试{
this.props.fetchInitialUsers（）
}捕获（错误）{
控制台错误（错误）
}
}
clickHandlerOne（）{
让hidden=this.state.showForm
这是我的国家({
showForm:！隐藏
})
}
手变（活动）{
//console.log（'event.target'，event.target）
这是我的国家({
[event.target.name]：event.target.value
})
}
异步handleSubmit（用户ID）{
event.preventDefault（）
常量updateUser={
id:userId，
伊萨明：这个.state.stat
}
//log（'updateuser'，updateuser）
等待这个.props.updateUserThunk（updateUser）
this.props.fetchInitialUsers（）
}
render（）{
const users=this.props.users
//console.log（'PROPS'，this.PROPS）
console.log（'USERS'，this.props.USERS）
返回(
{/* 
按…排序。。。
价格（从高到低）
价格（从低到高）
名称
*/}
{users.map（user=>(
{/*删除thunk*/}
this.props.deleteUserThunk（user.id）}
>
X
用户Id:{User.Id}


用户名：{user.Username}

用户电子邮件：{User.Email}

管理员状态：{user.isAdmin？'true'：'false'}


创建日期：{'}
{新的Intl.DateTimeFormat（'en-GB'{
月：“短”，
日期：“两位数”，
年份：“数字”
}).format（新日期（user.createdAt））}


{
这个。单击HandlerOne（）
}}
variant=“大纲信息”
>
管理状态切换
this.handleSubmit（user.id）}>
用户isAdmin？
真的
假的
{/* */}
提交


))}
)
}
}
常量mapStateToProps=状态=>{
返回{
用户：state.alluser
}
}
const mapDispatchToProps=调度=>{
返回{
loadSingleUser:id=>dispatch（fetchSingleUser（id）），
updateUserThunk:updatedUser=>dispatch（updateUserThunk（updatedUser）），
//getSortedBeers：（sortBy，beers）=>调度（sortBeers（sortBy，beers）），
fetchInitialUsers:（）=>dispatch（getUsers（）），
deleteUserThunk:userId=>dispatch（deleteUserThunk（userId））
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（AllUsers）

在上面的代码中，当我点击红色的“x”按钮时，什么都没有发生。我必须点击刷新按钮才能从我的网页中删除我现在删除的用户

---

如何在不点击刷新的情况下将用户从当前视图中删除

这不是一个完整的答案，但这里肯定有一个问题：

const response=wait axios.delete（`/api/users/${delUserId}`）

---

如果您查看web控制台中提供的错误屏幕截图，它会显示

undefined

应该在哪里

delUserId

。因此，在单击“X”和上一行之间的某个地方，您没有正确地传递用户ID。

这里，您正在组件“AllUsers”中使用mapDispatchToProps

您的deleteUserThunk（在THUNK CREATORS中）被分配给deleteUserThunk（在组件“AllUsers”中）

因此，你需要打电话给你的恶棍