如何使用 React Hooks 传递函数？

Question

如何使用 React Hooks 传递函数？ 我使用过 useCallback，但它显示一个错误，表明它不是一个函数。

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

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

然后我正在传递函数：

<Popup hidePopUp={this.hidePopUp}/>

这是我的 Hooks 问题：

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

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

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

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

Answer 1

首先是拼写错误和传递对同一函数的引用时的一些常见错误。 否则，传递这个函数的记忆版本根本不应该是一个问题。

工作演示在这里。

其次，这里没有看到useCallback实际使用。

您应该使用依赖项来更新您的函数以表示popup变量的正确值。 就是这样：

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

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

<Popup hidePopup={togglePopUp}/>

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

Answer 2

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

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

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

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