Компонент React с таблицей React внутри другого компонента перенаправляет на страницу входа, когда window.location.reload () - PullRequest
0 голосов
/ 28 мая 2020

Родительский компонент использует redux для подключения.

Ожидаемое поведение : - перезагрузить и остаться на странице родительского компонента

Поведение : - перезагрузить и перенаправить на страницу входа

Я подумал, что может быть лучше использовать history.pu sh или подключить страницу, но не понял. Можете ли вы помочь?

Вот как подключена родительская страница:



import React, { Component} from "react";
import { connect } from 'react-redux';
import { Link} from 'react-router-dom';
import Home from '../../_containers/Films/Home';
import Header from '../../_components/Films/Header';
import Footer from '../../_components/Films/Footer';
import MoviesList from '../../_components/Movies/MoviesList';


class FilmPage extends Component {
// ... component code
}

function mapState(state) {
    const { authentication: { user } } = state;
    return { user };
}

const connectedFilmPage = connect(mapState)(FilmPage);
export { connectedFilmPage as FilmPage };

Вот страница с window.location.reload () в классе DeleteMov ie

import React, { Component } from 'react'
import ReactTable from 'react-table'
import api from '../../_api'
import { history } from "../../_helpers";


import styled from 'styled-components'

import 'react-table/react-table.css'

const Wrapper = styled.div`
    padding: 0 0px 0px 0px;
`


class UpdateMovie extends Component {
    updateId = event => {
        event.preventDefault()

        history.push(`/movies/update/${this.props.id}`)
    }

    render() {
        return <button onClick={this.updateId}>Modifier</button>
    }
}

class DeleteMovie extends Component {
    deleteId = event => {
        event.preventDefault()

        if (
            window.confirm(
                `Voulez vous supprimer le film ${this.props.id} de manière permanente ?`,
            )
        ) {
            api.deleteMovieById(this.props.id)
            window.location.reload()
            //history.push(`/film/`)

        }
    }

    render() {
        return <button onClick={this.deleteId}>Supprimer</button>
    }
}



class MoviesList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            movies: [],
            columns: [],
            isLoading: false,
        }
    }


    componentDidMount = async () => {
        this.setState({ isLoading: true })

        await api.getAllMovies().then(movies => {
            this.setState({
                movies: movies.data.data,
                isLoading: false,
            })
        })
    }

    render() {
        const { movies, isLoading } = this.state
        const { user, users } = this.props;

        const columns = [

            {
                Header: 'Film',
                accessor: 'name',
                //filterable: true,
            },
            {
                Header: 'N°CNC',
                accessor: 'isan',
                //filterable: true,
            },
            {
                Header: 'N°ISAN',
                accessor: 'cnc',
                Cell: props => <span>{props.value.join(' / ')}</span>,
            },
            {
                Header: '',
                accessor: '',
                Cell: function(props) {
                    return (
                        <span>
                            <DeleteMovie id={props.original._id} />
                        </span>
                    )
                },
            },
            {
                Header: '',
                accessor: '',
                Cell: function(props) {
                    return (
                        <span>
                            <UpdateMovie id={props.original._id} />
                        </span>
                    )
                },
            },
        ]

        let showTable = true
        if (!movies.length) {
            showTable = false
        }


        return (
            <Wrapper>
                {showTable && (
                    <ReactTable
                        data={movies}
                        columns={columns}
                        loading={isLoading}
                        //defaultPageSize={10}
                        showPagination={false}
                        showPageSizeOptions={false}
                        minRows={0}
                    />
                )}
            </Wrapper>
        )
    }
}


export default MoviesList
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...