即使 React.memo 返回 true，子组件也会在父组件重新渲染时重新渲染

Question

我有一个嵌套组件，用于发起上传图像的 HTTP 请求。它显示进度。

\n

const PreviewItem = React.memo(function PreviewItem(props: PreviewItemProps) {\n    const {fileObject, handleRemove, classes, onUploadFinished} = props\n\n    const [isLoading, setIsLoading] = useState(false)\n    const [completed, setCompleted] = useState(0);\n\n    const cancelTokenSource = axios.CancelToken.source();\n\n    useEffect(() => {\n        const data = new FormData();\n        data.append('file', fileObject.file);\n\n        const config: AxiosRequestConfig = {\n            onUploadProgress: function (progressEvent) {\n                const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);\n                setCompleted(percentCompleted)\n            },\n            cancelToken: cancelTokenSource.token\n        };\n\n        if (!fileObject.isUploaded) {\n            setIsLoading(true)\n            avantiApi.post<DirectUploadResponse>("images/upload", data, config).then(response => {\n\n                setIsLoading(false)\n\n                if (onUploadFinished) {\n                    onUploadFinished(response.data, fileObject)\n                }\n            }).catch(e => console.log("Upload Error", e))\n        }\n        return function abortUpload() {\n            console.log("Use effect...aborting...")\n            cancelTokenSource.cancel("Cancelled")\n        }\n    }, [fileObject])\n\n    return <> ..... </>\n}, function (prevProps: Readonly<PropsWithChildren<PreviewItemProps>>, nextProps: Readonly<PropsWithChildren<PreviewItemProps>>) {\n    const areEqual = prevProps.fileObject === nextProps.fileObject\n    console.log("Are equal?", areEqual)\n    return areEqual\n})\n

\n

我的问题是，即使 React.memo\xe2\x80\x99spropsAreEqual函数返回 true，组件也会重新渲染（如果父组件重新渲染），同时上传图像，从而请求重新启动。\n我是否错过了有关使用的某些内容React.memo？

\n

Answer 1

我建议更改为：

}, function (prevProps: Readonly<PropsWithChildren<PreviewItemProps>>, nextProps: Readonly<PropsWithChildren<PreviewItemProps>>) {
    const areEqual = JSON.parse(prevProps.fileObject) === JSON.parse(nextProps.fileObject)
    console.log("Are equal?", areEqual);
    return areEqual;
})

确保乳清确实平等，也许这就是问题所在。