如何使用React Redux和模态形式刷新表中的数据？

Question

我在使用react / redux和表单刷新表中的数据时遇到问题。我需要做的是填写模式表格，而不是提交到后端，然后使用setState刷新表。我可以做所有事情，以便呈现表，显示模式，提交数据，但是在模式关闭时无法刷新表中的数据。如何通过redux获得此结果？

import React, {useState} from 'react';
import ContainerHeader from 'components/ContainerHeader/index';
import IntlMessages from "../../../util/IntlMessages";
import {useDispatch, useSelector, shallowEqual} from 'react-redux';
import {
    getBanksFromBackend,
    storeBankBackend,
    updateBankBackend,
    deleteBankBackend,
} from '../../../actions';
import MaterialTable, {MTableToolbar} from "material-table";
import CardBox from "../../../components/CardBox";
import FormDialog from "./FormDialog";
import TextFields from "./TextFields";

const BanksPage = ({match}) => {
    const dispatch = useDispatch();
    const allBanks = useSelector(state => state.banks, shallowEqual);

    const [state, setState] = useState({
        columns: [
            {
                title: 'Avatar',
                field: 'imageUrl',
                render: rowData => <img src={rowData.imageUrl} style={{width: 30, borderRadius: '50%'}}/>
            },
            {title: 'ID', field: 'id', editable: 'never'},
            {title: 'Bank Name', field: 'bnk_name'},
            {title: 'Bank Iban', field: 'bnk_iban'},
            {title: 'Bank BIC', field: 'bnk_bic'},
        ],
        data: allBanks.banks.map(bank => {
            return (
                {
                    imageUrl: 'https://img.icons8.com/office/80/000000/user.png',
                    id: bank.id,
                    bnk_name: bank.bnk_name,
                    bnk_iban: bank.bnk_iban,
                    bnk_bic: bank.bnk_bic,
                }
            )
        })
    });


    return (
        <div className="app-wrapper">
            <ContainerHeader match={match} title={<IntlMessages id="pages.banks"/>}/>
            <div className="row">

                <CardBox styleName="col-lg-12">
                    <MaterialTable
                        title="Users Table"
                        columns={state.columns}
                        data={state.data}
                        options={{
                            exportButton: true,
                            grouping: true,
                            selection: true
                        }}
                        components={{
                            Toolbar: props => (
                                <div>
                                    <MTableToolbar {...props} />
                                    <div style={{padding: '0px 10px'}}>
                                        <div className="card d-inline-block">
                                            <FormDialog {...state}/>
                                        </div>
                                    </div>
                                </div>
                            ),
                        }}
                    />
                </CardBox>

             

            </div>

        </div>
    )

}

export default BanksPage;

这是模式部分

import React, {useState} from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import {useDispatch, useSelector, shallowEqual} from "react-redux";
import {getBanksFromBackend, storeBankBackend} from "../../../actions";


const FormDialog = (props) => {
    console.log('Proprietà passate al form: ', props);

    const dispatch = useDispatch();

    const initModalState = {
        open: false,
    };
    const [modalState, setModalState] = useState(initModalState);

    const [bankName, setBankName] = useState('');
    const [bankIban, setBankIban] = useState('');
    const [bankBic, setBankBic] = useState('');

    const [tableState, setTableState] = useState(props);
    console.log('Stato iniziale Tabella:', tableState);

    const handleClickOpen = () => {
        setModalState({open: true})
    };

    const handleRequestClose = () => {
        setModalState({open: false})
    };


    return (
        <div>
            <Button variant="contained" className="bg-primary text-white" onClick={() => handleClickOpen()}>Add
                Bank</Button>
            <form>
                <Dialog open={modalState.open} onClose={() => handleRequestClose()}>
                    <DialogTitle>Subscribe</DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            Add Bank from Form.
                        </DialogContentText>

                        <TextField
                            autoFocus
                            margin="dense"
                            id="bnk_name"
                            label="Bank Name"
                            type="text"
                            fullWidth
                            onChange={(event) => setBankName(event.target.value)}
                            defaultValue={bankName}
                        />
                        <TextField
                            autoFocus
                            margin="dense"
                            id="bnk_iban"
                            label="Bank Iban"
                            type="text"
                            fullWidth
                            onChange={(event) => setBankBic(event.target.value)}
                            defaultValue={bankIban}
                        />
                        <TextField
                            autoFocus
                            margin="dense"
                            id="bnk_bic"
                            label="Bank BIC"
                            type="text"
                            fullWidth
                            onChange={(event) => setBankIban(event.target.value)}
                            defaultValue={bankBic}
                        />

                    </DialogContent>

                    <DialogActions>
                        <Button onClick={() => handleRequestClose()} color="secondary">
                            Cancel
                        </Button>
                        <Button onClick={() => handleRequestClose()} color="primary">
                            Submit
                        </Button>

                        <Button onClick={() => new Promise((resolve) => {
                            setTimeout(() => {
                                resolve();
                                dispatch(storeBankBackend
                                    ({
                                            bnk_name: bankName,
                                            bnk_iban: bankIban,
                                            bnk_bic: bankBic
                                        }
                                    )
                                );
                                dispatch(getBanksFromBackend());
                                handleRequestClose();
                            }, 2000)
                        })} color="primary">
                            Submit Bank
                        </Button>

                    </DialogActions>
                </Dialog>
            </form>
        </div>
    );

}

export default FormDialog;

Answer 1

            <Button onClick={() => new Promise((resolve) => {
                        setTimeout(() => {
                            resolve();
                            dispatch(storeBankBackend
                                ({
                                        bnk_name: bankName,
                                        bnk_iban: bankIban,
                                        bnk_bic: bankBic
                                    }
                                )
                            );
                            dispatch(getBanksFromBackend());
                            handleRequestClose();
                        }, 2000)
                    })} color="primary">

您已在调度刷新动作之前调用了resolve，将resolve移至回调函数的最后一行。