更改 state 并使用反应在 function 调用上渲染组件

Question

我正在创建一个模块，用户必须在其中上传图像，在等待时我想使用加载 state 设置覆盖，我有以下代码：

const ModulePage = () => {
        
        const sendData = () => {
                //...Send data to firebase
            }
    
        return {
            <div className="Overlay" />  //I want to display this conditionally while sending
            //...
            <button onClick={sendData}>Send Module</button>
        }
    }

我尝试使用 useState

const ModulePage = () => {
    const [isUploading, setIsUploading] = useState(false);

    const sendData = () => {
            setIsUploading(true)
            //...Send data to firebase
            setIsUploading(false)
        }

    return {
        {isUploading && <div className="overlay" />} 
        //...
        <button onClick={sendData}>Send Module</button>
    }
}

但是没有 useEffect 不起作用，并且使用 useEffect 它在无限循环上运行，如果我这样做：

const ModulePage = () => {
        const [isUploading, setIsUploading] = useState(false);
    
        const uploadHandler = () => {
            setIsuploading(true);
        }

        useEffect(() => {
                //...Send data to firebase
                setIsUploading(false)
            }, [isUploading]);
    
        return {
            {isUploading && <div className="overlay" />} 
            //...
            <button onClick={uploadHandler}>Send Module</button>
        }
    }

它从不运行 sendData function

Answer 1

如果发送数据代码是 promise 你试试这个

const sendData = async () => {
  setIsUploading(true)
  await //... Send data to firebase
  setIsUploading(false)
}

或这个

const sendData = () => {
  setIsUploading(true)
  sendDataFunction().then((result) => {
    setIsUploading(false)
  }).catch((err) => {
    setIsUploading(false)
  })
}