无法在回调中调用 Hoc React Hook "useEffect"

Question

我正在尝试在 React 中将 HOC 组件与功能组件一起使用，但是在使用钩子时我一直收到错误消息React Hook "useEffect" cannot be called inside a callback.我做错了什么，我该如何解决这个问题？

const HOC = (WrappedComponenet, entity) => {
  return function () {
    const [data, setData] = useState([]);
    const [term, setTerm] = useState("");

    useEffect(() => {
      fetch(`https://jsonplaceholder.typicode.com/${entity}`)
        .then((res) => res.json())
        .then((data) => setData(data));
    }, []);

    let filteredData = data.slice(0, 10).filter((d) => {
      if (entity === "users") {
        const { name } = d;
        return name.indexOf(term) >= 0;
      }
      if (entity === "todos") {
        const { title } = d;
        return title.indexOf(term) >= 0;
      }
    });

    return <WrappedComponenet data={filteredData} />;
  };
};

Answer 1

看看这个片段：

const HOC = (WrappedComponenet, entity) => {
  function MyCustomComponent() {
    const [data, setData] = useState([]);
    const [term, setTerm] = useState("");

    useEffect(() => {
      fetch(`https://jsonplaceholder.typicode.com/${entity}`)
        .then((res) => res.json())
        .then((data) => setData(data));
    }, []);

    let filteredData = data.slice(0, 10).filter((d) => {
      if (entity === "users") {
        const { name } = d;
        return name.indexOf(term) >= 0;
      }
      if (entity === "todos") {
        const { title } = d;
        return title.indexOf(term) >= 0;
      }
    });

    return <WrappedComponenet data={filteredData} />;
  };

  return <MyCustomComponent/>
};

无法在回调中调用 Hoc React Hook "useEffect"

Hoc React Hook "useEffect" cannot be called inside a callback

javascript

reactjs

higher-order-components