Question

我创建了一个对话框，该对话框在表的每一行上打开，我可以在该对话框中编辑和发送有关某人的信息。我关闭对话框，需要刷新页面，然后才能看到页面更新。我需要做的是在对话框关闭时更新父组件。

我整理了父组件的无绒毛版本，以及如何调用下面的数据-

import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router-dom';
import PeopleEditDialog from './PeopleEditDialog';

class EnhancedTable extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            openPeopleEditDialog: false
        };

        this.handlePeopleEditDialog = this.handlePeopleEditDialog.bind(this);
    }

    handlePeopleEditDialog() {
        this.setState({
            openPeopleEditDialog: !this.state.openPeopleEditDialog
        });

    render() {
        const { openPeopleEditDialog } = this.state;
        const { loader, people, peopleListError } = this.props;

        return (
                <React.Fragment>
                        <Toolbar>
                            <div className="actions">
                                <Tooltip title="Edit">
                                    <IconButton aria-label="Edit" onClick={this.handlePeopleEditDialog}>
                                        <Edit />
                                    </IconButton>
                                </Tooltip>
                                <PeopleEditDialog
                                    open={this.state.openPeopleEditDialog}
                                    onClose={this.handlePeopleEditDialog}
                                    selected={selectedDialog}
                                />
                            </div>
                        </Toolbar>
                    <div className="flex-auto">
                        <div className="table-responsive-material">
                            <Table>
                                <TableBody>
                                    //Rows of people data
                                    {people}
                                </TableBody>

                            </Table>
                        </div>
                    </div>
                </React.Fragment>
            )
        );
    }
}

const mapStateToProps = ({ peopleList }) => {
    const { loader, people, peopleListError, appliedFilters } = peopleList;
    return { loader, people, peopleListError, appliedFilters};
}

export default withRouter(connect(mapStateToProps, {})(withStyles(styles, { withTheme: true })(EnhancedTable)));

除非刷新，否则

peopleList不会更新。关闭对话框时，我需要应用一些最新的东西：

<PeopleEditDialog
  open={this.state.openPeopleEditDialog}
  onClose={this.handlePeopleEditDialog}
  selected={selectedDialog}
 />

那么当组件关闭时如何从mapStateToProps调用最新的消息，以便获得刷新的列表？

对话框关闭时刷新父视图/ mapStateToProps

0 个答案: