Javascript this.props不返回从父组件获取的数据（React）_Javascript_Reactjs

Javascript this.props不返回从父组件获取的数据（React）

javascript reactjs

Javascript this.props不返回从父组件获取的数据（React）,javascript,reactjs,Javascript,Reactjs,我试图在React中呈现音频播放器的播放列表信息。数据来自父组件（PostContent.js）中的获取调用。返回的数据是一个对象数组，如下所示： [{name:'track name'，artist:'artist name'，url:''，lrc:'string'，theme:'other string'}，{…}，{…}，等等} 我无法在子组件（AudioPlayer.js）的render（）方法中返回数据。当我在render（）中输入console.log（this.props.audi

我试图在React中呈现音频播放器的播放列表信息。数据来自父组件（PostContent.js）中的获取调用。返回的数据是一个对象数组，如下所示： [{name:'track name'，artist:'artist name'，url:''，lrc:'string'，theme:'other string'}，{…}，{…}，等等}

我无法在子组件（AudioPlayer.js）的render（）方法中返回数据。当我在render（）中输入console.log（this.props.audio）时，我的终端会打印三个响应。第一个是空数组，接下来两个是我需要的正确数据（对象数组）

如何在AudioPlayer.js组件的render（）方法中的“props”对象中的“audio”键上设置道具

我应该提到的是，我正在使用react aLayer库，并且我能够使用硬编码数据，如这里的示例（），但我正在尝试为博客网站制作一个动态播放列表组件。任何建议都非常感谢

AudioPlayer.js（子组件）

import React，{PureComponent，Fragment}来自'React'；
从“../react aplayer”导入ReactAplayer；
导入“/AudioPlayer.css”；
从“../../src/adrian_trinkhaus.jpeg”导入样本；
导出默认类AudioPlayer扩展React.Component{
//事件绑定示例
onPlay=（）=>{
console.log（'on play'）；
};
onPause=（）=>{
console.log（'on pause'）；
};
//访问aplayer实例的示例
onInit=ap=>{
this.ap=ap；
};
render（）{
console.log（'AudioPlayer呈现中的道具'，this.props.audio）
常量道具={
主题:"F57F17",，
LRC类型：3，
音频：这个。道具。音频
};
返回(
);
}
}

PostContent.js（父组件）

import React，{Component，useState，Fragment}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“/AudioPlayer”导入AudioPlayer；
导出默认类PostContent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
id:“”，
情节数据：[]，
音频：[]
}
}
异步组件didmount（）{
const{id}=this.props.match.params；
const response=等待获取(`http://localhost:5000/episode/${id}/playlist`）；
const jsonData=await response.json（）；
const songs=jsonData；
const audio=Object.key（歌曲）.map（key=>{
返回{
名称：歌曲[键]。名称，
艺术家：歌曲[关键]。艺术家，
url:songs[key].url，
封面：歌曲[关键]。封面，
歌曲[key].lrc，
主题：歌曲[key]。主题
}
});
this.setState（{audio}）
}
componentDidUpdate（prevProps、prevState）{
if（prevState.audio！==此.state.audio）{
const newAudio=this.state.audio；
this.setState（{audio:newAudio}，（）=>console.log（'newAudio'，this.state.audio））
}
}
render（）{
返回(
主页
{this.state.eposodedata.map（（项，i）=>(
{item.post_title}
{item.post_content1}
{item.post_content2}
{item.post_content3}
))}
主页
)
}
}

事实上，我认为它不起作用，因为您在props obejct中设置了this.props，所以您可能需要执行以下操作

var that = this 
const props = {
  audio = that.props.audio 
}

事实上，我认为它不起作用，因为你在道具obejct中设置了这个.props，所以也许你需要做一些类似的事情

var that = this 
const props = {
  audio = that.props.audio 
}

我在一个异步场景中使用了您的代码

我认为问题在于，当您试图访问

ReactAPlayer

组件中的有效负载时，音频尚未从异步调用加载。您需要做的是，仅当“audio”像这样有效时才使用

if（audio.length）{…}

或

音频&&…

某种形式的检查，以防止在reactAplayer渲染功能中访问它

仅供参考-您可以删除

componentdiddupdate

hook，因为在…Didmount钩子中有一个

setState

调用，当在…Didmount中调用

setState

时，组件调用其

render（）

因此触发子级重新渲染，其子级也将执行相同的操作。

我在打开代码的情况下使用了一个异步场景