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

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

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} />
...

代码片段有点不理想。对于生产，我假设将更改处理程序包装到 useCallback 中，以免在每次渲染时重新创建。

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

2 个答案: