0

如何使用 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>
4

2 回答 2

3

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

工作演示 在这里。

其次useCallback，在这里被看到并没有实际用处。

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

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

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

<Popup hidePopup={togglePopUp}/>

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

于 2019-05-08T14:28:37.020 回答
1

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

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

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

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

于 2021-03-14T15:54:29.333 回答