reactjs - 防止重新渲染未受影响的子组件

Question

我有以下相关组件：

1.MapInput允许我将键映射到值的组件：

export default function MapInput({
    name,
    defaultValue, 
    control,
    Element,
    ...props
}: MapInputProps<D, T> & P) {
    return (
        <Controller
            name={name}
            defaultValue={defaultValue}
            control={control}
            render={({ onChange, value }) => (
                <>
                    {Object.keys(value || {}).map((key) => (
                        <InputGroup key={key} mt={2}>
                            <InputLeftAddon>{key}</InputLeftAddon>
                            <Element
                                value={value![key]}
                                onChange={(newValue?: T) =>
                                    onChange({ ...value, [key]: newValue } as D)
                                }
                                {...props}
                            />
                        </InputGroup>
                    ))}
                </>
            )}
        />
    );
}

• defaultValue可以是类似的东西

{
    "key1": "value1",
    "key2": ""
}

• name并且control是react-hook-form Controller.
• Element是要渲染的受控输入组件，例如FileInput.

2.FileInput将文件上传到预签名 AWS url 的组件。

export default function FileUpload({
    value,
    onChange
}) {
    const [selectedFile, setSelectedFile] = useState<File | undefined>();
    const [uploading, setUploading] = useState(false);
    const inputRef = useRef<HTMLInputElement>(null);

    useEffect(() => {
        let controller: AbortController;
        if (!selectedFile) {
            return;
        }

        setUploading(true);

        {...API request, get pre-signed url, set abort controller, upload file to pre-signed URL, set uploading to false}

        return () => {
            controller?.abort();
        };
    }, [...]);

    {...if no value, render upload button}

    return (
        <Input
            isReadOnly
            value={value}
            readOnly
        />
    );
}

出现以下问题：

您可能会猜到文件上传需要一段时间，具体取决于文件。现在并行上传多个文件Controller时，当更快的文件上传完成时，更改中的值会重新呈现子项。由于useEffect钩子，较慢的文件上传然后通过控制器中止并引发异常。

有什么方法可以解决这个问题，同时仍然使用像这里（value/onChange）这样的受控输入？

标签： reactjsreact-hook-form