备忘录没有检测到传递到组件中的道具的变化

Question

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

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没有详细说明传入的道具的变化，有没有办法听变化？

Answer 1

check不是状态的一部分，是道具的一部分。尝试将其传递给 useState 挂钩以使组件有状态

Answer 2

问题出在 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}
            />

备忘录没有检测到传递到组件中的道具的变化

memo doesn't detect the changes in the props pass into the component

javascript

reactjs

react-native

graphql

react-apollo