Question

我遇到的问题是，删除列表中的项目后，页面无法自动刷新。列表中的项目已删除，但我需要手动刷新页面才能查看更新的列表。有什么办法可以改善代码？

这是List.js操作。操作

$scope.inventarios[indexInventarios].Localizacoes[indexLocalizacoes].allItemsSelected = true;

这是UserList.js组件。组件

//Update user action

export const UPDATE_USER = 'UPDATE_USER';
export const updateUser = (id, ...data) => async (dispatch, getState, api) => {
const res = await api.put('/user/update/' + id, data[0])
    .then(function (res) {
        return res;
    })
    .catch(function (err) {
        return err.response;
    });

dispatch({
    type: UPDATE_USER,
    payload: res.data
});
};

// Delete user actions
export const DELETE_USER = 'DELETE_USER';
export const deleteUser = (id) => async (dispatch, getState, api) => {
const res = await api.delete('/user/del/' + id, null)
    .then(function (res) {
        return res;
    })
    .catch(function (err) {
        return err.response;
    });

dispatch({
    type: DELETE_USER,
    payload: res.data,
    state: getState
});
};

这是UserUpdates Reducer。 减速器

import React, { Component } from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import {deleteUser} from '../Actions/Update';
import {handleModal} from "../Actions/Global";

class UsersList extends Component {
constructor(props) {
    super(props);
}

editUser(user) {
    this.props.handleModal(user);
}

handleDelete(userid) {
    this.props.deleteUser(userid);
}

renderUsers(users) {
    return users.map((user) => {
        return (
            <tr key={user.id}>
                <td>{user.firstName}</td>
                <td>{user.lastName}</td>
                <td>{this.displayCurrentOrg(user)}</td>
                <td className="md-visible"> . 
{moment(user.createdAt).format('MM.DD.YYYY')}</td>
                <td>
                    <button className="btn btn-primary" onClick={() => 
this.editUser(user)}><i
                        className="fa fa-edit"></i></button>
                    <button
                        className="btn btn-danger"
                        onClick={() => {
                            if (window.confirm('Are you sure to delete this 
user?')) this.handleDelete(user.id)
                        }}><i className="fa fa-trash"></i></button>
                </td>
            </tr>
        );
    })
}
render() {
    return (
        <table className="table table-responsive-lg">
            <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Current Organization</th>
                <th className="md-visible">Registered</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            {this.renderUsers(this.props.users)}
            </tbody>
        </table>
    )
  }
 }

 function mapStateToProps(globalState) {
 return {};
 }

 export default connect(mapStateToProps, {deleteUser, handleModal}) . 
 (UsersList);

Answer 1

我认为您用于payload的{{1}}数据格式错误。我假设您的dispatch是state列表。然后我认为代码应该是：

users

Answer 2

收到删除或更新成功后，应调度重新加载数据的操作。那应该更新您的列表和用户界面。这样，您无需刷新页面即可查看数据更改。

我遇到的问题是，删除列表中的项目后，页面无法自动刷新。列表中的项目已删除，但我需要手动刷新页面才能查看更新的列表。有什么办法可以改善代码？

这是List.js操作。动作

//Update user action

export const UPDATE_USER = 'UPDATE_USER';
export const updateUser = (id, ...data) => async (dispatch, getState, api) => {
const res = await api.put('/user/update/' + id, data[0])
    .then(function (res) {
        return res;
    })
    .catch(function (err) {
        return err.response;
    });

dispatch({
    type: UPDATE_USER,
    payload: res.data
});
dispatch({
   type: LOAD_USER
});
};

// Delete user actions
export const DELETE_USER = 'DELETE_USER';
export const deleteUser = (id) => async (dispatch, getState, api) => {
const res = await api.delete('/user/del/' + id, null)
    .then(function (res) {
        return res;
    })
    .catch(function (err) {
        return err.response;
    });

dispatch({
    type: DELETE_USER,
    payload: res.data,
    state: getState
});
dispatch({
   type: LOAD_USER
});
};

我已为此调度LOAD_USER操作，可能是您引用的是加载用户数据以供显示的其他操作。

Answer 3

这里是您为了查看更新的用户列表而应该做的一些摘要：

// Update user list action
export const UPDATE_USER_LIST = 'UPDATE_USER_LIST';
export const updateUsers = () => async (dispatch, api) => {
    const res = await api
        .put('/users') // you need to use GET on the URI where you store the users 
        .then(res => {
            return res;
        })
        .catch(err => {
            return err.response;
        });

    dispatch({
        type: UPDATE_USER_LIST,
        payload: res.data
    });
};

// Delete user action
export const DELETE_USER = 'DELETE_USER';
export const deleteUser = (id) => async (dispatch, getState, api) => {
const res = await api.delete('/user/del/' + id, null)
    .then(function (res) {
        // you should call another action to update the User list
        dispatch({
            type: UPDATE_USER_LIST
        });
        return res;
    })
    .catch(function (err) {
        return err.response;
    });

    dispatch({
        type: DELETE_USER,
        payload: res.data,
        state: getState
    });
};

// The reducer
import {ADD_USER} from '../Actions/Create';
import {DELETE_USER, UPDATE_USER} from '../Actions/Update';

export default (state = null, action) => {

    switch (action.type) {
        case ADD_USER:
            return action.payload;
        case DELETE_USER:
            return action.payload;
        case UPDATE_USER:
            return action.payload;
            // add a case where you get the payload and place it in the users state in the store
        case UPDATE_USER_LIST:
            return action.payload
        default:
            return state;
       }

   };

您应该查询用户的URI（GET），并使用将有效负载传递到减速器中以获取新版本的用户列表。

希望有帮助：）

列表中的DELETE和UPDATE项目后，页面不会自动刷新。 React-Redux

3 个答案: