Question

如何通过React Hooks传递函数？我使用过useCallback，但是它显示错误消息，它不是函数。

在类组件中，我这样做的是：

hidePopUp = (event) => {
    event.preventDefault();
    this.setState({
        popup: !this.state.popup
    })
}

然后我正在传递函数：

<Popup hidePopUp={this.hidePopUp}/>

这是我的胡克斯问题：

const hidePopup = useCallback(
    (event) => {
        event.preventDefault();
        setPopup(!popup);
    }, []
);

<Popup hidePopup={() => hidePopup}/>

这是我在Popup组件中的按钮：

<button onClick={(event)=>this.props.hidePopUp(event)}></button>

Answer 1

首先在传递对同一功能的引用时出现的所有拼写错误和一些常见错误。否则，完全通过该函数的备注版本就不会有问题。

工作演示 here。

第二，此处没有看到useCallback的实际用法。

您应该使用依赖项来更新函数，以表示popup变量的正确值。方法如下：

const togglePopUp = useCallback(
    event => {
      event.preventDefault();
      setPopup(!popup);
    },
    [popup]
  );

第三，当您将函数作为prop传递时，可以直接传递引用

<Popup hidePopup={togglePopUp}/>

注意-我已将您的hidePopUp重命名为togglePopUp

Answer 2

实际上，你可以不用useCallback()来使用pass函数。我今天遇到了类似的问题。然后我意识到我需要在您声明分配函数的变量之前添加 const 。简单地说，您应该在创建的 const 之前添加 hidePopUp()，因为您在那里使用了箭头函数。

您的函数的更新版本应该是：

const hidePopUp = (event) => {
    event.preventDefault();
    this.setState({
        popup: !this.state.popup
    })
}

额外说明：我并不是说其他人建议使用 useCallback 是错误的。我想强调的是，您面临的问题与回调无关。

如何通过React Hooks传递函数？

2 个答案: