如何將基於類的組件中的函數轉換為 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相同