React函数组件打印props.details控制台输出两次且首次为空如何解决

• 这是React的正常渲染逻辑，不属于bug：
  父组件初始化details状态时默认赋值为空数组，子组件首次渲染接收到的props就是空数组，对应第一次控制台打印。当父组件异步拉取数据完成后，会更新details状态，状态变更会触发所有消费该状态的子组件重渲染，此时子组件拿到的props.details就包含实际数据，对应第二次打印结果。
• 额外触发因素：若项目根节点包裹了<React.StrictMode>严格模式，开发环境下React会主动执行两次组件渲染来校验副作用逻辑，也会出现两次打印的情况，生产环境会自动关闭该机制，不会重复渲染。

• 常规业务场景不需要规避两次渲染，只需在使用details时做兼容处理即可，避免空数组时报错：

// 渲染列表时的示例写法
{props.details.map(item => (
  <div key={item.id}>{/* 渲染单条内容 */}</div>
))}
// 空状态展示写法
{!props.details.length && <div>暂无数据</div>}

• 如果希望子组件仅在数据就绪后才渲染，可以在父组件侧加条件渲染逻辑：

// 父组件内渲染当前组件的代码
{details.length > 0 && <MainConents details={details} />}

• 若确认存在非必要的重复渲染，可以使用React.memo包裹子组件，浅对比props变更来跳过不必要的渲染：

export default React.memo(MainConents)

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