React Native 子组件更新

Posted 2023-02-22

【中文标题】React Native 子组件更新

【英文标题】：React Native Child Component update

【发布时间】：2019-04-29 06:02:08

【问题描述】：

当用户单击 Swipable 按钮时，我正在尝试更新子组件（表示 listItem），以便将其设置为“读取”。在我的父组件“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】：

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

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

不要使用 NotificationRow 内部状态 - 只需传递 backgroundColor 属性，或者像这样使用它：backgroundColor: this.props.dataRow.read ? 'red' : 'blue 如果你真的想使用内部状态，你可以使用ComponentWillUpdate(nextProps, nextState) 或ComponentDidUpdate(prevProps, prevState) 来比较道具是否发生了变化。避免使用 ComponentWillRecieveProps，因为它很快就会被弃用。

【讨论】：

谢谢，@Žiga-kerec，我想我明白了你告诉我的提示。我尝试实现它们，但是在添加“ComponentWillUpdate(nextProps, nextState) 或 ComponentDidUpdate(prevProps, prevState)”时，NotificationRow.js 上没有一个是正常的？当我更新 NotificationList.js 上的“读取”时，JSON 对象会正确更新，但它不会调用以前的函数，以强制更新。还有其他建议吗？

@Integer 我刚刚注意到我用大写的第一个字母编写了函数。应该是componentDidMount。否则，尝试我在第一点说的，直接使用 props 而不将它们复制到子组件的内部状态。在这种情况下，您无需担心同步它们。

我想我可能会遗漏一些东西@Žiga Kerec。由于“NotifcationsRow.js”文件中的函数componentDidMount 和componentWillUpdate 仅在第一个屏幕渲染时被调用。我已经将“NoficationsRow.js”更改为使用“this.props”。有什么我可能遗漏的线索吗？