Уведомление компонентов React о триггере для обновления - PullRequest
0 голосов
/ 10 марта 2020

У меня есть текстовый компонент, который принимает идентификатор продукта, и когда вы стираете его, он отправляется в асинхронную службу c для получения сведений о продукте. На родительском уровне, когда вы также изменяете, какую категорию идентификатора вы вводите, он использует поле формы избыточности, которое привязывается к подпоркам текстового компонента, чтобы уведомить компонент также о выключении go и выполнить загрузку сведений о продукте для всего текста. компоненты этого типа.

Теперь я добавляю функциональность для предварительного заполнения формы значениями и хочу затем запустить выборку данных продукта для всех текстовых компонентов, как если бы я обновил категорию идентификатора. .

Проблема в том, что когда я использую скрытое поле формы с меткой даты, чтобы представить последний раз, когда запрашивалась «ручная выборка», и сравнивал prevprops с новыми реквизитами, только первый текстовый компонент на странице выполняет это, другие нет. Я думал, что каждый компонент будет иметь свои собственные предварительные свойства, а не делить его среди всех экземпляров компонента.

Я также пытался сделать это с локальной установкой состояния, но это приводит к бесконечному l oop.

Поле формы, которое я использую в качестве триггера

<div className="col-sm-7">
     <IdentifierCategorySelector fieldName="IdentifierCategory"/>
     <input type="hidden" fieldName="LastRefreshTime" />
</div>

И код действия, который я использую для запуска refre sh

this.props.changeFieldValue(`LastRefreshTime`, new Date().getTime());   

И сопоставление моего реквизита для текстового компонента

const mapStateToProps = function (store) {
    const selector = formValueSelector(NewProductFormName);
    const getFieldValue = fieldName => selector(store, fieldName);

    return {
        getFieldValue,
        serviceUrl: store.system.get('config').ServiceUrl,
        identifierCategory: getFieldValue('IdentifierCategory'),
        lastRefreshTime: getFieldValue('LastRefreshTime')
    };
};

Попытка A при методе обновления

componentDidUpdate(prevProps, prevState) {
        var lastRefreshTime = this.state.data.get('lastRefreshTime');
        if ((prevProps.identifierCategory !== this.props.identifierCategory || prevProps.lastManualRefresh !== this.props.lastManualRefresh)) {
            const product = this.props.getFieldValue(this.displayFieldName);
            this.validateProduct(product, true);            
        }
    }

Попытка B

    constructor(props) {
        super(props);

        this.state = {
            data: Map({
                lastRefreshTime: null
            })
        };
    }

 componentDidUpdate(prevProps, prevState) {       
        var lastRefreshTime = this.state.data.get('lastRefreshTime');
        if ((prevProps.identifierCategory !== this.props.identifierCategory || lastRefreshTime !== this.props.lastRefreshTime)) {
            let refreshState = this.state.data.set('lastRefreshTime', this.props.lastRefreshTime);            
            this.setState({data: refreshState});

            const product= this.props.getFieldValue(this.displayFieldName);
            this.validateProduct(product, true);            
        }
    }

Попытка A срабатывает только в первом тексте компонент на экране, хотя у меня их три. Когда я отлаживаю компонент, другие два компонента уже имеют prevProps, обновленные с новой отметкой времени, поэтому они не ссылаются sh.

Попытка B переходит в бесконечное l oop.

Кто-нибудь может подсказать как это исправить?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...