Javascript 基于另一个函数创建react钩子

我对React钩子比较陌生，但熟悉类组件

我试图在

onButtonPress（）

上调用

firebase.auth（）.signInWithPopup（provider）

，并将输出作为响应

此时，

useffect（）

应该运行

const AppleAuthBtn = (props) => {

  let provider = new firebase.auth.OAuthProvider('apple.com');
  provider.addScope('email');
  provider.addScope('name');

  let [response, onButtonPress] = firebase.auth().signInWithPopup(provider);

  useEffect(() => {
    if (response && typeof props.onAuthenticate === 'function') {
      props.onAuthenticate(response, "Apple");
    }
  },[response])
  
  return(
<AuthButton 
      styles={[MainStyles.loginButton]}
      type='apple'
      icon={<MaterialCommunityIcons name="apple" size={26} color="black" style={{alignSelf: "center", justifySelf: "center", margin: 7}}/>}
      onPress={onButtonPress}
      buttonText={"Sign In with Apple"}        
    />
  )
}

这是有道理的-

firebase.auth（）.signInWithPopup（提供程序）

几乎肯定只生成一个对象

---

如何编写钩子，使onButtonPress调用此函数，response获得输出？

使用useState保存响应（

const[response，setResponse]=useState（）

）

---

然后将

onPress

设置为一个运行

firebase.auth（）.signInWithPopup（provider）

的函数，然后使用

setResponse

为什么不在附加到按钮的单独函数中调用一个setResponse呢？@WiktorZychla我认为这样的解决方案可能是正确的，但我不确定是这样，还是我遗漏了钩子的工作原理

TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.