反应删除记录并将用户重定向到状态为更新的仪表板页面

Question

我想删除其详细页面中的特定记录，删除后我希望用户重定向主列表页面。

现在使用此代码，我可以删除记录，但出现错误TypeError：无法读取未定义的属性“ xxx”，我假设在删除单个记录（如＃1）之后，它将尝试重新呈现同一页面，并且事实上，已删除的记录数据将不处于该状态，因此它将抛出“无法读取属性”

现在，我的最终目标是将用户从该详细页面移至列表页面，在这里我可以看到在删除后无法找到的人员列表，如何将用户重定向到另一页面。

在我的情况下，我有人员列表，可以说我在列表中有两个ID为= 1和2的人员。

带到人的详细页面（如http://localhost:3000/persons/1），应该删除该页面，然后将用户发送到更新了http://localhost:3000/persons/的主列表页面

这是我的代码

PersonDetailedHeader.jsx

import React, { Component } from 'react'
import { Segment, Image, Item, Header, Button } from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import { deletePerson } from '../personsActions';
import { connect } from 'react-redux';

const mapState = (state) => ({
    persons: state.persons,
})

const actions = {

    deletePerson
}


class PersonsDetailedHeader extends Component {

    handleDeletePerson = personID => {
        this.props.deletePerson(personID);

    }


    render() {
        const { person } = this.props;

        const personImageStyle = {
            filter: 'brightness(30%)'

        };
        const personImageTextStyle =
        {
            position: 'absolute',
            bottom: '5%',
            left: '5%',
            width: '100%',
            height: 'auto',
            color: 'white'
        };




        return (
            <Segment.Group>
                <Segment basic attached="top" style={{ padding: '0' }}>
                    <Image src={person.ImageURL} size="large" style={personImageStyle} />

                    <Segment basic style={personImageTextStyle}>
                        <Item.Group>
                            <Item>
                                <Item.Content>
                                    <Header
                                        size="huge"
                                        content={person.FullName}
                                        style={{ color: 'white' }}
                                    />
                                    <p>BirthDate:  <strong>{person.BirthDate}</strong></p>
                                    <p>
                                        Sex: <strong>{person.Sex}</strong>
                                    </p>
                                </Item.Content>
                            </Item>
                        </Item.Group>
                    </Segment>
                </Segment>

                <Segment attached="bottom">
                    <Button color="red" onClick={() => this.handleDeletePerson(person.id)}>
                        Delete Person</Button>



                    <Button color="orange" floated="right" as={Link} to={`/managePerson/${person.id}`}>
                        Manage Person
                </Button>
                </Segment>
            </Segment.Group >
        )

    }
}

export default connect(mapState, actions)(PersonsDetailedHeader);

PersonList.jsx

import React, { Component, Fragment } from 'react'
import PersonListItem from './PersonListItem';

class PersonList extends Component {
    render() {
        const { persons, deletePerson } = this.props;
        return (
            <Fragment>
                {persons.map(person => (
                    <PersonListItem
                        key={person.id}
                        person={person}
                        deletePerson={deletePerson} />
                ))}


            </Fragment>
        )
    }
}

export default PersonList

PersonDashboard.jsx

import React, { Component } from 'react'
import { Grid } from 'semantic-ui-react';
import PersonList from './PersonList/PersonList';
import { connect } from 'react-redux';
import { createPerson, updatePerson, deletePerson } from './personsActions';
import LoadingComponent from '../../app/layout/LoadingComponent';




const mapState = (state) => ({
    persons: state.persons,
    loading: state.async.loading
})


const actions = {
    createPerson,
    updatePerson,
    deletePerson
}


class PersonDashboard extends Component {


    handleDeletePerson = personID => {
        this.props.deletePerson(personID);
    }



    render() {

        const { persons, loading } = this.props;

        if (loading) return <LoadingComponent />
        return (
            <Grid>
                <Grid.Column width={12}>
                    <PersonList persons={persons} deletePerson={this.handleDeletePerson} />
                </Grid.Column>
                <Grid.Column width={3}>

                </Grid.Column>
            </Grid>

        )
    }
}

export default connect(mapState, actions)(PersonDashboard)

现在以下代码适用于我的Person减速器，如下所示

personsActions.js

import { CREATE_PERSON, UPDATE_PERSON, DELETE_PERSON, FETCH_PERSON } from "./personsConstants";

import { asyncActionStart, asyncActionFinish, asyncActionError } from "../async/asyncActions";
import { fetchSampleData } from "../../app/data/mockApi";
import { toastr } from "react-redux-toastr";

export const createPerson = (person) => {
    return async dispatch =>{
        try{
            dispatch({
                type: CREATE_PERSON,
                payload:{
                        person 
                    }
                })
                toastr.success('Sucess!','Person has been created');
        }
        catch(error){
            toastr.error('Opps !','Something went Wrong');
        }
    };
};


export const updatePerson = (person) =>{
    return async dispatch =>{
        try{
            dispatch({
                type: UPDATE_PERSON,
                payload:{
                    person 
                }
            })
            toastr.success('Upadate Sucess !','Person has been Sucessfully updated');
        }
        catch(error){
            toastr.error('Opps !','Something went wrong while update');
        }
    }

}

export const deletePerson = (personId) =>{
    return async dispatch =>{
        try{
            dispatch({
                type: DELETE_PERSON,
                payload:{
                    personId
                }
            })
            toastr.success('Sucess !','Person Deleted sucessfully');
        }
        catch(error){
            toastr.error('Opps !','Something went wrong while delete person');
        }
    }

}

export const loadPersons = () =>{
    return async dispatch =>{
        try{
            dispatch(asyncActionStart())
            const persons = await fetchSampleData();
            dispatch({type:FETCH_PERSON,payload:{persons}})
            dispatch(asyncActionFinish())
        }
        catch(error){
            console.log(error);
            dispatch(asyncActionError())
        }
    }
}

personReducer.js

import {createReducer} from '../../app/common/utils/reducerUtils';
import { CREATE_PERSON, UPDATE_PERSON, DELETE_PERSON, FETCH_PERSON } from './personsConstants';

const initState =[]

const createPerson = (state,payload) =>{
    return [...state,payload.person]
}

const updatePerson = (state,payload) =>{
    return [
        ...state.filter(person => person.id !== payload.person.id),payload.person
    ]
}


const deletePerson = (state,payload) =>{
    return [
        ...state.filter(person => person.id !== payload.personId)
    ]
}


const fetchPersons = (state,payload) =>{
        return payload.persons
}


export default createReducer(initState,{
    [CREATE_PERSON]: createPerson,
    [UPDATE_PERSON]: updatePerson ,
    [DELETE_PERSON]: deletePerson,
    [FETCH_PERSON]: fetchPersons
} )

这里是“详细”页面的屏幕快照。

Answer 1

一种可能的解决方案是在render()中检查是否存在person（或personId）？如果是这样，请像平常一样呈现该人员的详细页面...如果该人员不存在，则将其重定向到所需页面（例如主列表页面）。

因此，删除逻辑没有重定向逻辑，只需删除该人。