javascript - memo 没有检测到传入组件的 props 的变化

Question

我正在使用 Apollo GraphQL 中的 useMutation Hook ，并且我想使用 onCompleted 属性执行特定任务。基本上，我想在 useMutation 成功完成时执行 setCheck() 钩子(Hook)，并将 check 状态作为 prop 传递给子组件

const ParentComponent = () => {
    const [ check, setCheck ] = useState(false)
    const [ createMessage, { loading } ] = useMutation(CREATE_MESSAGE_MUTATION, {
        onCompleted: data => {
            setCheck(true)
        },
        onError: data => {
            console.log("onError Mutation", data)
        }
    })

    return (
        <KeyboardAvoidingView>
            <FlatList 
                data={messages}
                renderItem={({ item }) => 
                    <ChildComponent 
                        item={item} 
                        check={check}
                    />
                }
                keyExtractor={item => item.id.toString()}
            />
        </KeyboardAvoidingView>
    )
}

问题是 ChildComponent 每次父组件渲染时都会渲染太多次，所以我使用 memo 解决了不必要的重新渲染:

const ChildComponent = ({check}) => {
    console.log("check", check)
    return (
        <View style={styles.container} >

        </View>
    )
}

export default React.memo(ChildComponent)

但是，memo 不知何故没有检测到状态 check 的变化，并且根本不渲染组件。为什么 memo 无法详细说明传入的 props 的变化，有没有办法监听这些变化？

Answer 1

问题出在 FlatList 上 - 它仅在其 data 更改时重新渲染其子级。由于 renderItem 依赖于 check，它不是 data 的一部分，因此您需要将其包含在 extraData 属性中以导致check 更改时重新渲染的项目。请参阅文档中的示例:https://facebook.github.io/react-native/docs/flatlist#basic-example

所以你的 FlatList 组件应该是:

            <FlatList 
                data={messages}
                renderItem={({ item }) => 
                    <ChildComponent 
                        item={item} 
                        check={check}
                    />
                }
                keyExtractor={item => item.id.toString()}
                extraData={check}
            />