Reactjs React/Redux-当切换到第2页时，通过第1页中的Project name select字段选择的值不应更改或刷新

在page1.js中，当我选择一个项目名称时，该项目下的所有区域 项目将显示在表中。当我点击某个特定区域时 页面1将重定向到第2页，显示下的功能 选定区域。在page1中，我有一个名为project name的select字段。 在第2页中，我还有一个名为“项目和区域名称”的选择字段。 当我被重定向到第2页时，项目名称选择在第1页 不应在第2页中刷新，这意味着项目名称 当我们重定向到时，第1页中选择的内容应自动显示 页面

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/FirstPage”导入FirstPageIcon；
从“@material ui/icons/KeyboardArrowLeft”导入键盘arrowleft”；
从“@material ui/icons/KeyboardArrowRight”导入键盘arrowright”；
从“@material ui/icons/LastPage”导入LastPageIcon；
从“react redux”导入{connect}；
从“redux”导入{bindActionCreators}；
从“../../actions/index”导入{getallprojects}；
从“../../actions/index.js”导入{get_reports_for_area}”；
从“./../actions/index”导入{get_all_area_about_project}；
const actionsStyles=主题=>({
根目录：{
flexShrink:0，
颜色：theme.palete.text.secondary，
marginLeft:theme.space.unit*2.5，
},
});
设计数器=0；
函数createData（id、项目、评估完成、完成百分比、级别）{
返回{区域id:id，项目，评估完成，完成百分比，级别}；
}
常量样式=主题=>({
根目录：{
宽度：“100%”，
marginTop:theme.space.unit*3，
},
表:{
最小宽度：500，
},
包装纸：{
溢出x:'自动'，
},
搜索字段：{
保证金：“10px”，
大纲：“无”，
边框：“1px纯色灰色”，
填充：“5px”，
显示：“flex”，
justifyContent:“柔性端”，
对齐项目：“柔性端”，
}
});
类Page1扩展了React.Component{
状态={
行：[]，
页码：0，
行页码：5，
过滤器：“”，
项目名称：“”，
区域名称：“”
};
异步组件didmount（）{
等待这个。props.getallprojects（）；
}
handleOnChangeSelectValue=（e）=>{
这是我的国家({
项目名称：e.target.value
}, () => {
this.props.get\u区域的报告（this.state.projectname）；
this.props.get\u all\u area\u关于项目（this.state.projectname）
});
}
handleOnChangeareaselectvalue=（e）=>{
这是我的国家({
区域名称：e.target.value
}, () => {
});
}
组件将接收道具=（下一步）=>{
设arr=[]；
if（nextrops.getReportAreaRes&&nextrops.getReportAreaRes.response&&nextrops.getReportAreaRes.response.length）{
nextProps.getReportAreaRes.response.forEach（异步（元素，索引）=>{
等待arr.push（createData（element.area_id，element.area_name，element.percent，element.percent，element.level））；
if（index==nextrops.getReportAreaRes.response.length-1）{
this.setState（{rows:arr.sort（（a，b）=>（a.carries{
})
}
})
}
}
handleOnChangeareaselectvalue=（e）=>{
这是我的国家({
区域名称：e.target.value
});
}
HandleOnChangeFunctionitySelectValue=（e）=>{
这是我的国家({
功能：e.target.value
});
}
handleViewFunctionality=（）=>{
this.props.history.push（'/app/viewfunctionality/:id'）；
}
handleChange=事件=>{
this.setState（{filter:event.target.value}）；
};
handleChangePage=（事件，页面）=>{
this.setState（{page}）；
};
handleChangeRowsPerPage=事件=>{
this.setState（{page:0，rowsPerPage:event.target.value}）；
};
render（）{
const{classes}=this.props；
const{rows，rowsPerPage，page}=this.state；
const emptyRows=rowsPerPage-Math.min（rowsPerPage，rows.length-page*rowsPerPage）；
const{filter}=this.state；
const lowercasedFilter=filter.toLowerCase（）；
常量filteredData=rows.filter（项=>{
返回Object.key（item）.some（key=>
项[key].toString（）.toLowerCase（）.includes（小写筛选器）
);
});
返回(
第1页


项目
this.handleOnChangeSelectValue（e）}
>
选择
{this.props.getallprojectsRes&&this.props.getallprojectsRes.data&&this.props.getallprojectsRes.data.length>=0&&this.props.getallprojectsRes.data.map（（项目，索引）=>(
{item.name}
))}
{this.state.rows.length！==0？
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import IconButton from '@material-ui/core/IconButton';
import FirstPageIcon from '@material-ui/icons/FirstPage';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import LastPageIcon from '@material-ui/icons/LastPage';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { getallprojects } from '../../actions/index';
import { get_reports_for_area } from '../../actions/index.js';
import { get_all_area_regarding_project } from "../../actions/index";

const actionsStyles = theme => ({

    root: {
        flexShrink: 0,
        color: theme.palette.text.secondary,
        marginLeft: theme.spacing.unit * 2.5,
    },

});

let counter = 0;
function createData(id, project, Assessment_Completion, Achieved_Percentage, Level) {

    return { area_id: id, project, Assessment_Completion, Achieved_Percentage, Level };
}

const styles = theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing.unit * 3,

    },
    table: {
        minWidth: 500,
    },
    tableWrapper: {
        overflowX: 'auto',
    },

    searchField: {
        margin: '10px',
        outline: 'none',
        border: '1px solid gray',
        padding: '5px',
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
    }
});

class Page1 extends React.Component {
    state = {
        rows: [],
        page: 0,
        rowsPerPage: 5,
        filter: "",
        projectname: '',
        area_name: ''
    };

    async componentDidMount() {
        await this.props.getallprojects();
        }

    handleOnChangeSelectValue = (e) => {
        this.setState({
            projectname: e.target.value
        }, () => {
            this.props.get_reports_for_area(this.state.projectname);
            this.props.get_all_area_regarding_project(this.state.projectname)
        });
    }
    handleOnChangeareaselectvalue = (e) => {
        this.setState({
            area_name: e.target.value
        }, () => {
            
        });
    }

    componentWillReceiveProps = (nextProps) => {
        let arr = [];
        if (nextProps.getReportAreaRes && nextProps.getReportAreaRes.response && nextProps.getReportAreaRes.response.length) {
            nextProps.getReportAreaRes.response.forEach(async (element, index) => {
                await arr.push(createData(element.area_id, element.area_name, element.percent, element.percent, element.level));
                if (index === nextProps.getReportAreaRes.response.length - 1) {
                    this.setState({ rows: arr.sort((a, b) => (a.calories < b.calories ? -1 : 1)) }, () => {
                    })
                }
            })
        }
    }

    handleOnChangeareaselectvalue = (e) => {
        this.setState({
            area_name: e.target.value
        });
    }

    handleOnChangeFunctionalityselectvalue = (e) => {
        this.setState({
            functionality: e.target.value
        });
    }

    handleViewFunctionality = () => {
        this.props.history.push('/app/viewfunctionality/:id');
    }

    handleChange = event => {
        this.setState({ filter: event.target.value });
    };

    handleChangePage = (event, page) => {
        this.setState({ page });
    };

    handleChangeRowsPerPage = event => {
        this.setState({ page: 0, rowsPerPage: event.target.value });
    };

    render() {
        const { classes } = this.props;
        const { rows, rowsPerPage, page } = this.state;
        const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
        const { filter } = this.state;
        const lowercasedFilter = filter.toLowerCase();
        const filteredData = rows.filter(item => {
            return Object.keys(item).some(key =>
                item[key].toString().toLowerCase().includes(lowercasedFilter)
            );
        });

        return (
            <div>
                <div className="main-heading">Page 1</div>
                <br />
                <form>
                    <div className="form-group row">
                        <div className="col-sm-3">
                            <div className="field-text"><label>project</label></div>
                            <select
                                className="form-control"
                                id="project name data"
                                name="projectname"
                                value={this.state.projectname}
                                onChange={(e) => this.handleOnChangeSelectValue(e)}
                            >
                                <option>select</option>

                                {this.props.getallprojectsRes && this.props.getallprojectsRes.data && this.props.getallprojectsRes.data.length >= 0 && this.props.getallprojectsRes.data.map((item, index) => (
                                    <option value={item.id}
                                        key={index}>{item.name}</option>
                                ))}
                            </select>
                        </div>
                    </div>
                </form>

                <div className="row">
                    <div className="col-xl-12 col-lg-12">
                        {this.state.rows.length !== 0 ?                           
                                <Paper className={classes.root}>
                                    <div className={classes.tableWrapper}>
                                        <input value={filter} onChange={this.handleChange} placeholder="Search here..." className={classes.searchField} />
                                        <Table className={classes.table}>
                                            <TableHead>
                                                <TableRow>
                                                    <TableCell className={classes.tablehead}>Area</TableCell>
                                                    <TableCell className={classes.tablehead} align="center">Level</TableCell>
                                                </TableRow>
                                            </TableHead>
                                            <TableBody>
                                                {filteredData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => (
                                                    <TableRow key={row.id}>
                                                        <TableCell component="th" scope="row" className={classes.tablecell} onClick={() => this.handleViewFunctionality()}>
                                                            {row.project}
                                                        </TableCell>
                                                        <TableCell className={classes.tablecell} align="center">{row.Level}</TableCell>

                                                    </TableRow>
                                                ))}
                                                {emptyRows > 0 && (
                                                    <TableRow style={{ height: 48 * emptyRows }}>
                                                        <TableCell colSpan={6} />
                                                    </TableRow>
                                                )}
                                            </TableBody>

                                        </Table>
                                    </div>
                                </Paper>
                             : null
                        }
                    </div>
                </div>
            </div>
        );
    }
}

Page1.propTypes = {
    classes: PropTypes.object.isRequired,
};

function mapStateToProps({ userReducer }) {
    return {
        getallprojectsRes: userReducer.get_all_projects_Data,
        getReportAreaRes: userReducer.get_reports_for_area_Data,
        get_all_area_regarding_projectRes: userReducer.get_all_area_regarding_project_Data,

    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(
        {
            getallprojects: getallprojects,
            get_reports_for_area: get_reports_for_area,
            get_all_area_regarding_project: get_all_area_regarding_project,

        },
        dispatch
    );
}


export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Page1));

component / page2.js
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableCell from '@material-ui/core/TableCell';
import TableFooter from '@material-ui/core/TableFooter';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import IconButton from '@material-ui/core/IconButton';
import FirstPageIcon from '@material-ui/icons/FirstPage';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import LastPageIcon from '@material-ui/icons/LastPage';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { getallprojects } from '../../actions/index';
import { getarea } from '../../actions/index';
import { get_all_area_regarding_project } from "../../actions/index";
import { get_functionalities_regarding_area } from "../../actions/index";
import { get_reports_for_area } from '../../actions/index.js';
import { get_reports_for_functionality } from '../../actions/index.js';

const actionsStyles = theme => ({

    root: {
        flexShrink: 0,
        color: theme.palette.text.secondary,
        marginLeft: theme.spacing.unit * 2.5,
    },

});


let counter = 0;
function createData(id, project, Assessment_Completion, Achieved_Percentage, Level) {
    counter += 1;
    return { functionality_id: id, project, Assessment_Completion, Achieved_Percentage, Level };
}

const styles = theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing.unit * 3,

    },
    table: {
        minWidth: 500,
    },
    tableWrapper: {
        overflowX: 'auto',
    },

    searchField: {
        margin: '10px',
        borderRadius: '3px',
        outline: 'none',
        border: '1px solid gray',
        padding: '5px',
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
    }
});

class page2 extends React.Component {
    state = {
        rows: [],
        page: 0,
        rowsPerPage: 5,
        filter: "",
        projectname: '',
        area_name: '',
        functionality_name: ''
    };

    async componentDidMount() {
        await this.props.getallprojects();
    }

    handleOnChangeSelectValue = (e) => {
        this.setState({
            projectname: e.target.value
        }, () => {
               this.props.get_all_area_regarding_project(this.state.projectname)
        });
    }

    handleOnChangeareaselectvalue = (e) => {
        this.setState({
            area_name: e.target.value
        }, () => {
            this.props.get_reports_for_functionality(this.state.area_name);
            this.props.get_functionalities_regarding_area(this.state.area_name);

        });
    }

    handleOnChangeFunctionalityselectvalue = (e) => {
        this.setState({
            functionality_name: e.target.value
        }, () => {
            
        });
    }
    componentWillReceiveProps = (nextProps) => {
        console.log("nextProps------------------->", nextProps);
        let arr = [];

        if (nextProps.get_reports_for_functionalityRes && nextProps.get_reports_for_functionalityRes.response && nextProps.get_reports_for_functionalityRes.response.length) {
            nextProps.get_reports_for_functionalityRes.response.forEach(async (element, index) => {
                console.log("Index------------------------>", index)
                await arr.push(createData(element.functionality_id, element.functionality_name, element.percent, element.percent, element.level));
                if (index === nextProps.get_reports_for_functionalityRes.response.length - 1) {
                    this.setState({ rows: arr.sort((a, b) => (a.calories < b.calories ? -1 : 1)) }, () => {
                        console.log("rows---------->", this.state.rows)
                    })
                }
            })
        }
    }

    handleViewSubFunctionality = () => {
        this.props.history.push('/app/viewsubfunctionality/:id');
    }

    handleChange = event => {
        this.setState({ filter: event.target.value });
    };

    handleChangePage = (event, page) => {
        this.setState({ page });
    };

    handleChangeRowsPerPage = event => {
        this.setState({ page: 0, rowsPerPage: event.target.value });
    };



    render() {
        const { classes } = this.props;
        const { rows, rowsPerPage, page } = this.state;
        const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);

        const { filter } = this.state;
        const lowercasedFilter = filter.toLowerCase();
        const filteredData = rows.filter(item => {
            return Object.keys(item).some(key =>
                item[key].toString().toLowerCase().includes(lowercasedFilter)
            );
        });

        return (
            <div>
                <div className="main-heading">Page 2</div>
                <br />
                <form>
                    <div className="form-group row">
                        <div className="col-sm-3">
                            <div className="field-text"><label> project</label></div>
                            <select
                                className="form-control"
                                id="project name data"
                                name="projectname"
                                value={this.state.projectname}
                                onChange={(e) => this.handleOnChangeSelectValue(e)}
                            >
                                <option>select</option>

                                {this.props.getallprojectsRes && this.props.getallprojectsRes.data && this.props.getallprojectsRes.data.length >= 0 && this.props.getallprojectsRes.data.map((item, index) => (
                                    <option value={item.id}
                                        key={index}>{item.name}</option>
                                ))}
                            </select>
                        </div>
                        <div className="col-sm-3">
                            <div className="field-text"><label className="">Area</label></div>
                            <select
                                className="form-control"
                                id="area name data"
                                name="area_name"
                                value={this.state.area_name}
                                onChange={(e) => this.handleOnChangeareaselectvalue(e)}
                            >
                                <option>select</option>
                                {this.props.get_all_area_regarding_projectRes && this.props.get_all_area_regarding_projectRes.response && this.props.get_all_area_regarding_projectRes.response.length >= 0 && this.props.get_all_area_regarding_projectRes.response.map((item, index) => (
                                    <option value={item.id}
                                        key={index}>{item.name}</option>
                                ))}

                            </select>
                        </div>
                    </div>
                </form>

                <div className="row">
                    <div className="col-xl-12 col-lg-12">
                        {this.state.rows.length !== 0 ?                            
                                <Paper className={classes.root}>
                                    <div className={classes.tableWrapper}>
                                        <input value={filter} onChange={this.handleChange} placeholder="Search here..." className={classes.searchField} />
                                        <Table className={classes.table}>
                                            <TableHead>
                                                <TableRow>
                                                    <TableCell className={classes.tablehead}>Functionality</TableCell>
                                                    <TableCell className={classes.tablehead} align="center">Level</TableCell>
                                                </TableRow>
                                            </TableHead>
                                            <TableBody>
                                                {filteredData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => (
                                                    <TableRow key={row.id}>
                                                        <TableCell component="th" scope="row" className={classes.tablecell} onClick={() => this.handleViewSubFunctionality()}>
                                                            {row.project}
                                                        </TableCell>
                                                        <TableCell className={classes.tablecell} align="center">{row.Level}</TableCell>

                                                    </TableRow>
                                                ))}
                                                {emptyRows > 0 && (
                                                    <TableRow style={{ height: 48 * emptyRows }}>
                                                        <TableCell colSpan={6} />
                                                    </TableRow>
                                                )}
                                            </TableBody>

                                        </Table>
                                    </div>
                                </Paper>
                           : null
                        }
                    </div>
                </div>
            </div>
        );
    }
}

page2.propTypes = {
    classes: PropTypes.object.isRequired,
};

function mapStateToProps({ userReducer }) {
    return {
        getallprojectsRes: userReducer.get_all_projects_Data,
        getReportAreaRes: userReducer.get_reports_for_area_Data,
        get_all_area_regarding_projectRes: userReducer.get_all_area_regarding_project_Data,
        getfunctionality_regarding_areaRes: userReducer.functionality_regarding_area_Data,
        get_reports_for_functionalityRes: userReducer.get_reports_for_functionalityData,

    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(
        {
            getallprojects: getallprojects,
            get_reports_for_area: get_reports_for_area,
            get_all_area_regarding_project: get_all_area_regarding_project,
            get_functionalities_regarding_area: get_functionalities_regarding_area,
            get_reports_for_functionality: get_reports_for_functionality,

        },
        dispatch
    );
}

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(page2));