Я создаю несколько избранных модальных. Когда пользователь нажимает на элемент, элемент должен быть отмечен как "Проверено".
Проблема Я добавил/удалил id из массивов id. Когда я открываю и проверяю модальный, он не показывает знак "Проверить". Но когда я снова закрываю и открываю модальный, он показывает "Проверить".
Чтобы отслеживать выбранные элементы, я определил элементы в состоянии модального компонента.
state = {
selectedSeasonIds: this.props.selectedSeasonIds,
}
Вот реакция-native-модальная, которую я использую для отображения модального на экране
<Modal
isVisible={isSelectorVisible}
onBackdropPress = {() => this.props.hideSelector()}>
<View style={styles.modalContainer}>
<FlatList
style={styles.root}
data={this.props.items}
ItemSeparatorComponent={this._renderSeparator}
keyExtractor={this._keyExtractor}
renderItem={this._renderItemForMultiple}/>
</View>
</Modal>
Это функция рендеринга для каждого элемента
_renderItemForMultiple = ({item}) => {
return (
<TouchableOpacity
style={styles.itemStyle}
onPress={() => {this._handleMultipleItemPress(item.id)}}>
<RkText>{item.value}</RkText>
{ this._renderCheck(item.id) } <<< Here is the problem
</TouchableOpacity>
);
}
Когда пользователь нажимает на элемент, элемент _handleMultipleitemPress
вызывает _handleMultipleitemPress
_handleMultipleItemPress = (id) => {
let { selectionType } = this.props;
let { selectedSeasonIds, selectedSizeIds, selectedColorIds } = this.state;
if(selectionType===2) {
if(_.includes(this.state.selectedSeasonIds, id)) {
let newSelectedSeasonIds = _.filter(this.state.selectedSeasonIds, (curObject) => {
return curObject !== id;
});
this.setState({selectedSeasonIds : newSelectedSeasonIds});
} else {
let newSelectedSeasonIds = [...this.state.selectedSeasonIds, id];
this.setState({selectedSeasonIds : newSelectedSeasonIds});
}
}
// season Select Action
this.props.seasonSelectAction(id);
}
Проблема Мы добавили/удалили id из массивов id. Когда я открываю и проверяю модальный, он не показывает знак "Проверить". Но когда я снова закрываю и открываю модальный, он показывает "Проверить".
Каким-то образом модальное значение не выводится даже в том случае, если мы setState
в renderCheck()
. Почему это происходит? И как я могу это исправить?
_renderCheck = (id) => {
let { selectionType, selectedSeasonIds, selectedSizeIds, selectedColorIds } = this.props;
if(selectionType===2) {
if(_.includes(this.state.selectedSeasonIds, id)) {
return (<RkText>Check </RkText>);
}
}
return (<RkText> </RkText>);
}
Любые другие советы также будут оценены! Спасибо, что прочитали этот пост.
ОБНОВЛЕНИЕ Я отлаживаю код и когда я _renderItemForMultiple
элемент, он не проходит через _renderItemForMultiple
. Я думаю, это потому, что я не определял параметр для _renderItemForMultiple
. Как передать элемент в свой параметр? Любая идея?
Даже если ваше состояние изменяется, вы не передаете его в <FlatList>
, поэтому его реквизиты не меняются. Свой метод shouldComponentUpdate
возвращает false
когда его реквизит не изменяется. Как указано в документах:
extraData={this.state}
вFlatList
мы убеждаемся, чтоFlatList
сам будет повторно рендерить при измененииstate.selected
. Не устанавливая этуFlatList
,FlatList
не будет знать, что ей нужно перерисовать любые элементы, потому что это такжеPureComponent
и сравнение prop не будет показывать никаких изменений.
Поэтому вам нужно передать extraData={this.state}
в FlatList
.
_renderItemForMultiple
не отображается при установке setState. Почему он не отображается?