Реагировать на обновление собственного дочернего компонента - PullRequest
Новая
       40

Реагировать на обновление собственного дочернего компонента

0 голосов
/ 27 ноября 2018

Я пытаюсь обновить дочерний компонент (который представляет собой listItem), когда пользователь нажимает кнопку Swipable, чтобы установить для нее «чтение».В моем родительском компоненте «NotificationList.js» данные успешно обновляются, и когда я «console.log ()», данные обновляются.Однако я хочу изменить цвет фона ListItem, несмотря на это состояние (чтение / не чтение).Внутри дочернего компонента обновление работает нормально, но когда я пытаюсь обновить его на основе родительского компонента, изменения данных не перерисовываются на дочернем компоненте.

Я уже пытался использовать "setState"," componentDidMount "и" componentWillReceiveProps ".Вероятно, один из них должен решить мой вопрос, но я, возможно, не применил их правильно.

Таким образом, моя проблема связана с тем, как обновить дочерний компонент listItem, когда я обновляю свой объект данных на родительской стороне?

Может кто-нибудь дать мне несколько советов о том, как мне решить эту ситуацию?

Я отправляю некоторые из моих кодов ниже.Дайте мне знать, если вам может понадобиться информация о текущей проблеме.

Любая помощь с этим будет принята с благодарностью!

NotificationsList.js 

export default class NotificationsList extends Component {
    constructor(props) {
        super(props);
        this.state = {
                listViewData: this.props.datainfo,
        };
    }

   [.....]

render() {
    return (
    <View style={styles.container}>
                <SwipeListView
                    useFlatList
                    data={this.state.listViewData}
                    renderItem={ (data, rowMap) => (
                        <SwipeRow>
                            <View style={styles.rowBack}>
                            <TouchableOpacity onPress={ _ => {
                                this.updateReadState(data.item.key, rowMap);
                                }}>
                                <Text style={styles.backTextBlack}>{data.item.read == true ? "Unread" : "Read"}</Text>
                            </TouchableOpacity>
                        </View>

                            <NotificationsRow 
                                data={data.item}
                            />
                        </SwipeRow>
                    )}
                />
            </View>
        );
    }
}

NotificationsRow.js 

export default class NotificationsRow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            datarow: this.props.data,
        };
    }

render() {
    return (
        <View style={styles.container}>             
                    <View style={{ backgroundColor: this.state.datarow.read == true ? '#FFFFFF' : '#dddddd', }}>

                        <View style={ styles.listText }>                            
                            <View>
                                <Text style={ styles.messageText }> { this.state.datarow.message } </Text>
                                <TouchableWithoutFeedback onPress={ () => {
                                    this.state.rowReadState = !this.state.rowReadState;
                                }}>
                                    <Image source={ this.state.datarow.read == true ? require('../images/readed.png') : require('../images/unread.png') } />
                                </TouchableWithoutFeedback>
                            </View>
                        </View>
                    </View>
            </View>
        );
    }
}

1 Ответ

0 голосов
/ 27 ноября 2018

Цвет фона свойства NotificationRow устанавливается вашим внутренним состоянием компонента.В настоящее время он устанавливается вашим методом конструктора, и это только когда создается экземпляр NotificationRow.То же самое касается метода ComponentDidMount.Это срабатывает только при монтировании компонента.

Есть несколько способов обновить состояние вашего ребенка.

  1. не используйте внутреннее состояние NotificationRow - просто пропустите свойство backgroundColor или используйте его следующим образом: backgroundColor: this.props.dataRow.read ? 'red' : 'blue
  2. Если вы действительно хотите использовать внутреннее состояние, вы можете использовать ComponentWillUpdate(nextProps, nextState) или ComponentDidUpdate(prevProps, prevState) для сравнения изменения реквизита.Избегайте использования ComponentWillRecieveProps, так как это скоро станет устаревшим.
...