在回調中反應自定義鈎子

Question

我正在嘗試在回調邏輯中使用我的自定義鈎子，如下所示：

import React, { useEffect, useState } from 'react';
import useDataChange from '../../hooks/useDataChange';


const SomeComponent = () => {
  return (
    <Table
      handleTableChange={data => useDataChange(data)}
    />
  );
};


export default SomeComponent;

我的自定義鈎子（只是為了簡化）看起來像這樣：

const useDataChange = data => {
  console.log(data);
};

export default useDataChange;

簡而言之，當表中的數據發生更改時（即當 Table 組件中的 handleTableChange 被觸發時），應該觸發自定義鈎子。 相反，我得到：

不能在回調中調用 React Hook “useDataChange”。 React Hooks 必須在 React function 組件或自定義 React Hook function react-hooks/rules-of-hooks 中調用

表數據更改時如何使用它？

Answer 1

理解 hooks 的關鍵是從組件中提取出一些 react 代碼。 所以你的第一步是讓它在組件內部工作

const SomeComponent = () => {
  const [data, setData] = useState([])

  return (
    <Table
      handleTableChange={setData}
    />
  );
};

根據您的代碼，我沒有看到您需要掛鈎或副作用的地方。 但是讓我們假設您確實想要運行一些簡單的副作用：

const SomeComponent = () => {
  const [data, setData] = useState([])
  const [modifiedData, setModifiedData] = useState([])

  useEffect(() => {
    //here we're just going to save the current data stream into a new state variable for simplicity
    setModifiedData(data)
  }, [data])

  return (
    <Table
      handleTableChange={setData}
      data={modifiedData}
    />
  );
};

所以現在我們有了一些產生副作用的邏輯。 現在您可以將其提取到自己的鈎子中。

const useModifiedData = (data) => {
  const [modifiedData, setModifiedData] = useState(data)

  useEffect(() => {
    setModifiedData(data)
  }, [data])

  return modifiedData
}

const SomeComponent = () => {
  const [data, setData] = useState([])

  const modifiedData = useModifiedData(data)

  return (
    <Table
      handleTableChange={setData}
      data={modifiedData}
    />
  );
};

在這里，您有一個位於組件邏輯之外的鈎子，因此它現在可以在自己的文件中 go 並在您的項目中使用。

Answer 2

就像它說React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks 。 React 有這個限制，因此它可以跟蹤 state 和效果。 在您的情況下，您可以定義自定義掛鈎以返回 function 執行所需的工作，而不是直接在您的掛鈎中執行。

在這種情況下，您的自定義掛鈎文件將如下所示 -

const useDataChange = () => data => {
    console.log(data);
};

export default useDataChange;

然后在您的組件中，您可以像這樣使用它 -

import React, { useEffect, useState } from 'react';
import useDataChange from '../../hooks/useDataChange';


const SomeComponent = () => {
    const callback = useDataChnage();
    return (
    <Table handleTableChange={callbackdata} />
   );
};

export default SomeComponent;