我可以在 HOC（高阶组件）中使用 useState 吗？

Question

我有一个 returns 功能组件的 HOC（高阶组件）。我想使用 useState 但我收到此错误消息：

“src/HOC.js 行 5:35：无法在回调中调用 React Hook“useState”。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用 react-hooks/rules-of-hooks”

import React, { useState } from "react";

const HOC = (Component, data) => {
    return () => {
        const [count, setCount] = useState(data); // Error here
        const handleClick = () => {
            setCount(count + 1);
        };
        return (
            <Component
                countNumber={count}
                handleClick={handleClick}
            />
        )
    }
};

export default HOC;

import React from "react";
import HOC from "./HOC";

const LikesCount = ({countNumber, handleClick}) => {
    return (
        <div>
            {countNumber} <br />
            <button onClick={handleClick}>Like</button>
        </div>
    );
}

const EnhancedLikes = HOC(LikesCount, 5);

export default EnhancedLikes;

在HOC场景下，useState有什么办法吗？

Answer 1

正如评论中所讨论的，我将 post 上面 HOC 的自定义挂钩对应物：

据我在您的代码中的理解，您需要一个 HOC，您可以将其“挂钩”到组件，它将执行计数。

因此，您可以创建自定义挂钩：

const useCounter = (default = 0) => {
      const [count, setCount] = useState(default);
      const [add, setAdd] = useState(0);
      const handleClick = (base = 0) => {
          setCount(count + base + add);
      };
      const onSetAdd = (e) => setAdd(e.target.value);
      
      return {count, handleClick, onSetAdd};
}

现在将其挂接到功能组件中：


const LikesCount = () => {
    const {count, handleClick, onSetAdd} = useCounter(0);
    const onAddOne = () => handleClick(); // default is 1, so passing none = one
    const onAddTwo = () => handleClick(2);
    const onAddThree = () => handleClick(3);
   

    return (
        <div>
            <input type="number" onChange={onSetAdd} value={add} />
            {count} <br />
            <button onClick={onAddOne}>Like</button>
            <button onClick={onAddTwo}>Add 2</button>
            <button onClick={onAddThree}>Add 3</button>
        </div>
    );
}

export default LikesCount;

就是这样，你可以在任何你想要有计数器的组件上添加 ff 代码：

const {count, handleClick} = useCounter(0);

上面的代码与您提供的示例 HOC 完全相同。

我可以在 HOC（高阶组件）中使用 useState 吗？

Can I use useState inside HOC (High order component)?

reactjs

high-order-component

react-hooks

use-state