React-admin обновить dataGrid с помощью настраиваемой формы

Во-первых, я хочу сказать, что я новичок в реагировании (и я ненавижу фронтальную разработку, но, знаете, иногда мы не выбираем в своей работе) ....

Итак, я создаю настраиваемую форму с помощью response-admin без использования соединения REST от react-admin (это конкретная форма). После проверки формы значение с именем processingStatut нескольких данных изменяется, и это новое значение должно отображаться в <List><Datagrid>, отображаемом с помощью response-admin.

Итак, я следую документации по созданию действия редуктора для изменения логического значения с именем processingStatut в моем dataGrid следующим образом:

epassesReceived.js

export const EPASSES_RECEIVED = 'EPASSES_RECEIVED';
export const epassesReceived = (data) => ({
   type: EPASSES_RECEIVED,
   payload: { data },
});

мой customForm.js

import { epassesReceived as epassesReceivedAction } from './epassesReceived';
handleSubmit(event) {
    this.setState({
        post: this.post
    });
    const { fetchJson } = fetchUtils;
    const {
        showNotification,
        history,
        push,
        epassesReceived,
        fetchStart, fetchEnd
    } = this.props;
    const url = `${API_URL}/ePasses/update`;
    const datas = JSON.stringify(this.state);
    const options = {
        method: 'POST',
        body: datas
    };
    fetchStart();
    fetchJson(url, options)
        .then( response => epassesReceived(response.json) )
        .then(() => {
            showNotification('ra.notification.epasseRecorded');
            history.goBack();
        })
        .catch( error => {
            console.error(error);
            var message = error.message.replace(/ /g, '');
            showNotification(`ra.notification.${message}`, 'warning');
        })
        .finally(fetchEnd);
        event.preventDefault();
}

...

const mapStateToProps = state => ({
    customReducer: state.customReducer
});

export const EpassesUpdate = connect(mapStateToProps, {
    epassesReceived: epassesReceivedAction, 
    showNotification, 
    push,fetchStart, fetchEnd
})(translate(withStyles(formStyle)(EpassesUpdateView)));

и в моем app.js

import { EPASSES_RECEIVED } from './epassesReceived';
const customReducer = (previousState = 0, { type, payload }) => {
    console.log(payload, type);
    if (type == EPASSES_RECEIVED) {
        // console.log('modif');
        // payload.data[0].processingStatut=1; this is the purpose of the script. To show de modification changed after form's validation
        return payload;
    }

    return previousState;
}

и viewDataGrid.js

<List 
        classes={props.classes} 
        {...props} 
        exporter={exporter} 
        title='ePass.pageTitle' 
        perPage={15} 
        pagination={<PostPagination />} 
        filters={<EPassFilter businessunit={businessUnit} />} 
        bulkActions={<EPassBulkActions businessunit={businessUnit} />} 
        actions={<PostActions businessUnit={businessUnit} />}
    >
        <Datagrid classes={props.classes}>
            { businessUnit === undefined || !businessUnit.companyName &&
                <TextField source="businessUnitName" label="ePass.businessUnitName" />
            }
            <StateField source="processingStatut" label="" translate={props.translate} />
.....

Но в моем журнале консоли мое значение не меняется, и я теперь не знаю, почему ... Конечно, это работает, если я обновляю свою веб-страницу с помощью F5, потому что значение изменилось в моей базе данных. Но не в dataGrid реакции ... Я потерялся ...

возможно, вывод журнала может быть полезным:

log_output

Мы видим тип "EPASSES_RECEIVED" и измененные данные.


person Clément Gervaise    schedule 03.01.2019    source источник


Ответы (1)


Я думаю, ваша проблема связана с вашей выборкой. Попробуй это :

fetch(url, options)
        .then( response => response.json() )
        .then(data => {
            epassesReceived(data);
            showNotification('ra.notification.epasseRecorded');
            history.goBack();
        })
        .catch( error => {
            console.error(error);
            var message = error.message.replace(/ /g, '');
            showNotification(`ra.notification.${message}`, 'warning');
        })
        .finally(fetchEnd);
person François Alexandre COLOMBANI    schedule 26.02.2019