父组件componentDidMount异步更新props时，子组件Hooks如何同步state？

问题原因 #

你的代码核心问题出在useEffect的依赖项配置错误：

• 你在RelatedItems组件中监听的是内部stateitems，而非父组件传入的props.currentProduct
• 组件首次渲染时父组件还没完成异步请求，props.currentProduct默认是空字符串，因此本地items初始值为空
• 父组件异步请求完成更新currentProduct后，新的props传入子组件，但你的useEffect依赖项没有监听props.currentProduct，不会触发更新逻辑，因此items始终是空字符串

解决方案 #

有两种可行改法，根据你的后续需求选择即可：

方案1：修正依赖项（需要本地维护state场景）

如果你后续需要基于这个值做本地状态修改，只需要修改useEffect的依赖数组为传入的props：

import React, { useState, useEffect } from 'react';

const RelatedItems = (props) => {
  const [items, setItems] = useState(props.currentProduct);

  useEffect(() => {
    setItems(props.currentProduct);
  }, [props.currentProduct]) // 监听传入的props变化，而非内部state

  return (
    <div className="Related-Items">
      <h1>Related Items</h1>
      <h3>{items}</h3>
    </div>
  )
}

export default RelatedItems;

方案2：直接使用props（无需本地维护state场景）

你当前场景下本地state完全是props的副本，没有额外修改逻辑，可以直接去掉useState和useEffect，简化代码：

import React from 'react';

const RelatedItems = (props) => {
  return (
    <div className="Related-Items">
      <h1>Related Items</h1>
      <h3>{props.currentProduct}</h3>
    </div>
  )
}

export default RelatedItems;

内容的提问来源于stack exchange，提问作者Sebastian Carazo