У меня есть текстовый компонент, который принимает идентификатор продукта, и когда вы стираете его, он отправляется в асинхронную службу 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.
Кто-нибудь может подсказать как это исправить?