如何在每次渲染时为Icon Button传递不同值？状态保持异常求助

看起来你遇到的核心问题是所有音频图标共享了父组件的同一个状态值，导致每次更新AudioPathForRecording时，之前渲染的所有图标都会读取这个新值，最终所有实例的状态都变得一致。要解决这个问题，关键是让每个音频图标拥有独立的状态管理，而不是依赖父组件的单一状态。

具体解决方案：拆分独立子组件 #

把每个音频播放图标封装成独立的子组件，让每个子组件自己维护对应的audioPath和播放状态，这样每个实例的状态就不会互相干扰了。

1. 创建独立的音频播放器子组件

class AudioPlayerIcon extends React.Component {
  constructor(props) {
    super(props);
    // 每个子组件初始化自己的状态，接收父组件传递的初始音频路径
    this.state = {
      playAudio: false,
      audioPath: new AudioPath(props.audioPath)
    };
  }

  handlePress = () => {
    // 点击时只会修改当前组件的状态，不会影响其他实例
    console.log(this.state.audioPath);
    this.setState(prevState => ({
      playAudio: !prevState.playAudio
    }));
  };

  render() {
    return (
      <Ionicons
        name="ios-play"
        size={35}
        color={this.state.playAudio ? "red" : "blue"}
        style={{
          left: 90,
          position: "relative",
          shadowColor: "#000",
          shadowOffset: { width: 0, height: 0 },
          shadowOpacity: 0.5,
          backgroundColor: "transparent"
        }}
        onPress={this.handlePress}
      />
    );
  }
}

2. 修改父组件的状态管理逻辑

父组件不再用单一的AudioPathForRecording存储路径，而是改用数组存储所有需要渲染的音频路径，通过循环渲染每个独立的子组件：

class ParentComponent extends React.Component {
  state = {
    recordedAudioPaths: [] // 用数组存储所有录制完成的音频路径
  };

  // 当有新的录制音频时，将路径添加到数组中
  addNewAudioRecord = (newPath) => {
    this.setState(prevState => ({
      recordedAudioPaths: [...prevState.recordedAudioPaths, newPath]
    }));
  };

  // 渲染所有音频图标
  renderAudioIcons = () => {
    // 用map循环渲染每个子组件，每个组件接收独立的路径
    return this.state.recordedAudioPaths.map((path, index) => (
      // 注意：如果有删除/排序操作，最好用路径的唯一标识（如文件名）作为key，而非index
      <AudioPlayerIcon key={index} audioPath={path} />
    ));
  };

  render() {
    return (
      <div>
        {/* 其他组件内容 */}
        {this.renderAudioIcons()}
      </div>
    );
  }
}

为什么之前的方法无效？ #

你之前尝试的构造函数、全局变量等方式，本质上还是让所有图标共享同一个状态源（父组件的AudioPathForRecording）。每次父组件更新这个状态，所有已渲染的图标都会重新读取这个最新值，导致它们的audioPath被统一覆盖。而拆分独立子组件后，每个实例都持有自己的状态副本，父组件只负责传递初始数据，后续的状态更新完全由子组件自己管理，自然不会互相影响。

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