React组件重复渲染8次，仅第4、5次Props正常的问题求助

一、组件重复渲染&Props被清空的核心原因 #

1. 父组件状态管理漏洞：TrackList重复渲染8次，说明上层组件（父组件）多次更新了tracks这个props。大概率是父组件里tracks初始为空，API请求成功后赋值为有效歌曲数组，但后续又因日期选择回调、API请求loading逻辑处理不当等操作，把tracks再次重置为空，导致组件反复接收到空数组。
2. 错误修改Props：React中props是只读的，你直接给this.props.fixedArray赋值的操作完全违反单向数据流规则，不仅不会触发组件更新，还会导致数据混乱——页面空白就是因为fixedArray始终未被正确初始化，执行map时出现错误。

二、具体解决步骤 #

1. 先排查父组件的tracks更新逻辑 #

• 检查父组件中tracks的状态修改代码：比如是否发起API请求时就把tracks重置为空？建议改成仅在请求失败时清空，或者保留之前的有效数据，同时显示加载状态。
• 确认日期选择的回调逻辑：是否每次切换日期时，未等待新API返回就把tracks设为空？调整为仅当新请求成功拿到有效数据后，才更新tracks。

2. 修复TrackList组件的错误写法 #

不要直接修改props，若需要缓存有效数据，用类组件生命周期方法监听props变化，正确更新state：

import React from "react";
import "./TrackList.css";
import Track from "../Track/Track.js";

class TrackList extends React.Component {
  constructor(props) {
    super(props);
    // 初始化缓存，优先使用传入的有效数据
    this.state = {
      cachedTracks: props.tracks.length > 0 ? props.tracks : []
    };
  }

  // 监听props变化，仅当新tracks有内容且与之前不同时更新缓存
  componentDidUpdate(prevProps) {
    const newTracks = this.props.tracks;
    if (newTracks.length > 0 && newTracks !== prevProps.tracks) {
      this.setState({ cachedTracks: newTracks });
    }
  }

  render() {
    return (
      <div className="TrackList">
        {this.state.cachedTracks.map((track) => (
          <Track
            track={track}
            key={track.id}
            onAdd={this.props.onAdd}
            onRemove={this.props.onRemove}
            isRemoval={this.props.isRemoval}
          />
        ))}
      </div>
    );
  }
}

export default TrackList;

3. 减少不必要的重复渲染（可选） #

如果父组件频繁更新导致TrackList无效渲染，用React.PureComponent替代React.Component，它会浅比较props和state，仅当props真正变化时才重渲染：

// 仅修改组件继承的类即可
class TrackList extends React.PureComponent {
  // ... 其余逻辑保持不变
}

三、关键注意事项 #

• 永远不要修改props：React的props是单向传递的，只能读取，所有状态更新都应该在父组件或组件自身的state中处理。
• 优先解决父组件的状态逻辑：TrackList的props清空问题本质是父组件传入了空数组，所以先把父组件的tracks状态管理好，比在子组件缓存数据更重要。

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