为什么写在componentDidMount中的函数被频繁调用且state值为空？

问题原因与解决方法 #

1. 控制台打印state为空的问题 #

你看到state始终为空是两个异步特性叠加导致的：

• vidSearch是异步函数，调用后不会等待Youtube接口返回结果就会立刻执行后面的console.log语句
• React的setState本身也是异步操作，即使接口返回后执行了setState，也不会立刻同步更新this.state的取值
  你可以通过setState的回调函数验证数据是否成功存入state，回调会在state更新完成后触发：

vidSearch = async () => {
  const youtubeVid = await Youtube.get("/search");
  this.setState({ 
    vid: youtubeVid.data.items 
  }, () => {
    // 此处可拿到更新后的最新state
    console.log(this.state.vid)
  });
};

你也可以在componentDidUpdate生命周期中监听state的变化，验证更新结果。

2. 函数被频繁触发的问题 #

按你给出的代码，componentDidMount只会在组件首次挂载完成后执行1次，出现频繁触发可以按以下方向排查：

• 移除constructor中冗余的bind语句：你已经用箭头函数定义了vidSearch，天然绑定当前实例的this，不需要额外执行bind操作
• 排查父组件是否反复销毁重建当前组件：最常见的原因是父组件渲染时给当前组件传了动态变化的key属性，每次渲染key值不同就会触发组件销毁重建，反复执行componentDidMount
• 检查是否在componentDidUpdate、render等其他生命周期/渲染函数中调用了vidSearch，如果在render中调用会触发无限重渲染
• 确认Youtube请求工具的配置：是否开启了失败自动重试逻辑，请求出错反复重发会看起来像是函数被多次触发

需求适配说明 #

只要确保组件不会被反复销毁重建，放在componentDidMount中的请求逻辑本身就只会在页面刷新、组件首次挂载时执行1次，符合你的预期需求。

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