React中useEffect仅初始化执行，props更新后不触发如何解决？

问题场景 #

开发产品查询应用时，通过useState绑定输入框获取用户输入的产品ID，将ID通过Props传递给GetProduct子组件，子组件内通过useEffect按传入ID拉取对应产品数据并渲染，预期ID变化时自动刷新展示的产品信息。

问题现象：useEffect仅在应用启动（此时ID为空）时执行一次产品拉取逻辑，ID更新后产品数据不会同步刷新。

相关代码 #

App.tsx #

function App() {
const [id, setId] = useState("")
 const onChangeHandler = (event: { target: { value: React.SetStateAction<string> } }) => {
    setId(event.target.value)
}
return(
    <div className="App">
      <input
        type="text"
        name="name"
        onChange={onChangeHandler}
        value={id}
      />
      <GetProduct id={id}></GetProduct>
    </div>
)

GetProduct 组件 #

import { Product } from "../api/dto/product.dto"
import productService from "../services/product.service"

interface Props {
    id: string
}

export const GetProduct: React.FC<Props> = (props) => {  
    const [product, setProduct] = useState<Product>()
    useEffect(() => {
      async function fetchOne() {
        const response = await productService.getOne(props.id)
        setProduct(response.data)
      }
      fetchOne()
    }, [])
    return (
      <>
        <div>
          {product?.title}, {product?.description}, {product?.price}
        </div>
      </>
    )
  }

问题根因 #

useEffect的第二个参数为依赖数组，传入空数组[]时，副作用逻辑仅会在组件首次挂载阶段执行一次，后续组件接收到的props、内部state发生变更时，都不会触发该副作用重跑。当前代码中数据拉取逻辑写在空依赖的useEffect中，无法响应父组件传入的id更新。

修复方案 #

将props.id加入useEffect的依赖数组，即可在ID变更时自动触发数据拉取逻辑。
建议额外增加ID非空判断，避免首次加载、输入清空时发起无效请求，同时清空旧的产品展示数据。
修改后GetProduct组件的useEffect代码如下：

useEffect(() => {
  async function fetchOne() {
    if (!props.id) {
      setProduct(undefined)
      return
    }
    const response = await productService.getOne(props.id)
    setProduct(response.data)
  }
  fetchOne()
}, [props.id])

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