Reactjs 尽管有相同的道具，重新渲染组件

我有一个音频组件，可以从父级获取其源url

export default class VideoPlayback extends Component {
  constructor (props) {
    super(props)
  }

  render () {
    return (
        <audio src={this.props.audioUrl} id="activeModuleAudio" style={{ width: '80%' }} autoPlay controls />
    );
  }
}

导出默认类VideoPlayback扩展组件{
建造师（道具）{
超级（道具）
}
渲染（）{
返回(
);
}
}

这一切都很好，每次我通过音频组件一个新的URL，自动播放开始播放新的音频

问题是，有时传递的URL与前一个相同，但我仍然需要自动显示“新”源（也与前一个相同）。因为React没有看到任何更改，所以它不会更新组件，自动播放也不起作用

有什么想法吗

---

谢谢

要强制更新组件，可以使用内置方法：

this.forceUpdate（）

重新渲染。方法还跳过

shouldComponentUpdate

，以便始终重新呈现组件

在您的情况下，我知道父组件是容器组件，因此会获取数据并将其发送给子组件，以避免向子组件发送道具时出现问题。不要对其进行变异，而是使用immutable.js创建新道具，或者只需通过

object.assign

创建新对象

因此，如果您的父组件有这样的代码（伪代码）：

将其更改为：

someData=Object.assign({},someData,{audioUrl:"newAudioUrl"});

---

此解决方案确保即使使用相同的url地址，道具引用也会发生更改，因此子组件将在不使用forceUpdate的情况下重新呈现。

另一个选项是让React执行其操作，并仅重置组件接收道具的当前时间。如果数据不变，为什么要重新渲染

const-audio=>https://upload.wikimedia.org/wikipedia/commons/transcoded/b/bb/Test_ogg_mp3_48kbps.wav/Test_ogg_mp3_48kbps.wav.ogg';
类播放器扩展了React.Component{
组件将接收道具（）{
this.refs.audio.currentTime=0；
}
render（）{
返回；
}
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={audio}
}
密码{
this.setState（{audio}）；
}
render（）{
返回(
传同样的道具！
);
}
}
ReactDOM.render（，document.getElementById（'View'））
我也遇到了类似的问题，我设置的状态如下.setState（{navBarPinnedItem:e.currentTarget.dataset.name}）；并将navBarPinnedItem作为道具传递给子组件。我想重新呈现子组件，即使道具（即：navBarPinnedItem）是相同的，您能帮我解决这个问题吗。
someData=Object.assign({},someData,{audioUrl:"newAudioUrl"});