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

Question

我有一个返回功能组件的HOC（高阶组件）。我想使用useState，但收到以下错误消息：

“src/HOC.js第5:35行：不能在回调内调用React Hook“useState”。必须在React函数组件或自定义React Hook函数React Hook/rules of Hook中调用React Hook”

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

正如评论中所讨论的，我将发布上面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完全相同。