Question

当用户单击“可滑动”按钮时，我试图更新子组件（代表listItem），以便将其设置为“ read”。在我的父组件“ 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>
        );
    }
}

Answer 1

NotificationRow属性的背景颜色由内部组件状态设置。当前由您的构造方法设置，并且仅在创建NotificationRow实例时才设置。 ComponentDidMount方法也是如此。仅在安装组件时触发。

有几种方法可以更新孩子的状态。

请勿使用NotificationRow内部状态-只需传递backgroundColor道具，或使用类似backgroundColor: this.props.dataRow.read ? 'red' : 'blue
如果您真的想使用内部状态，则可以使用ComponentWillUpdate(nextProps, nextState)或ComponentDidUpdate(prevProps, prevState)来比较道具是否已更改。避免使用ComponentWillRecieveProps，因为它将很快被弃用。

反应本机子组件更新

1 个答案: