Возникла проблема с обновлением данных в таблице с использованием реакции / избыточности и формы. Здесь мне нужно заполнить модальную форму, затем отправить ее в мой бэкэнд и затем обновить таблицу с помощью setState. Я могу делать все это, так что визуализация таблицы, показ мод, отправка данных, но я не могу обновить sh данные в таблице, когда модал закрыт. Как я могу получить этот результат с редуксом?
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;