如何将基于类的组件中的函数转换为 React 中的函数式组件？

Question

我正在尝试将基于类的 React 组件转换为功能组件。 我应该如何转换函数，如：

onFileUpload = async () => {

        const formData = new FormData();

        formData.append(
            "ImageData.File",
            this.state.selectedFile,
            this.state.selectedFile.name
        );



        fetch('/api/Image', {
            method: 'POST',
            body: formData
        }).then(resposne => resposne.json())
            .then(data => {
                console.log(data);
                this.setState({ uploadResult: "File " + data.fileName + " successfully uploaded." });
                this.getList();
            });

    };

整个代码在这里： https://drive.google.com/file/d/1YSSMTGkxzeH1R1V2rgQkwl1QwxnoXtuq/view?usp=sharing

Answer 1

const FuncComponent = () => {
    const onFileUpload = async () => {
       // do magic here
    }
    return <div />
}

Answer 2

您将this.state.selectedFile替换为：

const [selectedFile, setSelectedFile] = useState() // and pass useState the initial state

当您需要更新selectedFile时，您将使用新数据调用setSelectedFile() 。

这与uploadResult相同