从 componentDidUpdate 生命周期方法重写 useEffect 钩子

Question

假设我们有一个买家 ID 输入，并且我们希望在每次买家 ID 更改时获取买家详细信息。 类组件的以下代码如下所示

componentDidUpdate(prevProps,prevState) {
  if (this.state.buyerId !== prevState.buyerId) {
    this.props.fetchBuyerData(this.state.buyerId); // some random API to search for details of buyer
  }
}

但是，如果我们想在功能组件中使用 useEffect 钩子，我们将如何控制它。我们如何将以前的道具与新道具进行比较。

如果按照我的理解写的话，会有点像这样。

useEffect(() => {
    props.fetchBuyerData(state.buyerId); 
}, [state.buyerId]);

但是 react 的 hooks linter 建议我也需要将 props 包含到依赖数组中，如果我在依赖数组中包含 props，一旦 props 发生更改，根据要求不正确，就会调用 useEffect。 如果它的唯一目的是进行 API 调用，有人可以帮助我理解为什么依赖数组中需要 props。 还有什么方法可以控制之前的状态或道具进行深度比较，或者只是控制 useEffect 中的函数执行。

Answer 1

在函数声明或组件内部解构 props。当fetchBuyerData 在useEffect 钩子中使用时，只需将其列为依赖项而不是所有props：

// deconstruct in declaration
function MyComponent({ fetchBuyerData }) {
  useEffect(() => {
    // caveat: something is wrong with the use of `this.state` here
    fetchBuyerData(this.state.buyerId); 
  }, [fetchBuyerData, state.buyerId]);
}

// deconstruct inside component
function MyComponent(props) {
  const { fetchBuyerData } = props;
  useEffect(() => {
    // caveat: something is wrong with the use of `this.state` here
    fetchBuyerData(this.state.buyerId); 
  }, [fetchBuyerData, state.buyerId]);
}

Answer 2

我假设您正在重写您的类组件信息功能之一。那么你最好在你设置新的state.bayerId 的地方包含你的fetch 请求（我假设它不是外部道具）。比如：

const [buyerId, setBuyerId] = React.useState('')

const handleOnChange = (ev) => {
  const { value } = ev.target

  if (value !== buyerId) {
    props.fetchBuyerData(value)
    setBuyerId(value)
  }
...

  return (
    <input onChange={handleOnChange} value={buyerId} />
...

代码 sn-p 有点欠佳。对于生产，我假设将更改处理程序包装到 useCallback 中，以便不会在每次渲染时重新创建它。