Javascript 如何访问对象内部的图像链接并使用react组件显示它

我有一个对象（称为opp）包含 此格式的数据

  {"randomtext"},
  { "randomtext"}, 
  {flag: "imagelink" , rand1: 23}, 
  {"randometext"} 

我试图访问flag属性中的值，并在react组件的帮助下显示它

我的预期结果应该是

<img src=" value in flag property"/>

到目前为止，我已经想出了这个

class App extends React.Component {
   
      render() {
       
        return (
          <div> 
          {opp.map(item => <Card  value={item} src={item.flag}/>)}
          </div>
        );
      }
    }
        ReactDom.render(<App />, document.getElementById("container1"));

类应用程序扩展了React.Component{
render（）{
返回(
{opp.map（item=>）}
);
}
}
render（，document.getElementById（“container1”）；

以下代码保存在另一个文件中

class Card extends React.Component {   
  render() {
    return (
      <div>
      <h1>{this.props.value}</h1>
           <img src={this.props.src}/>
           </div>
    
    );
  }
}
export default Card;

类卡扩展了React.Component{
render（）{
返回(
{this.props.value}
);
}
}
导出默认卡；

但每当我运行此命令时，它都会返回一个react错误，表示对象作为react子对象无效（找到：具有键{flag，rand1}的对象）。如果要呈现子对象的集合，请改用数组“

ps：为了可读性，将接受对此帖子的编辑

{this.props.value}

值是一个对象，您正在尝试在标头中渲染它。因此出现了错误

---

如果确实要打印值对象，可以将其字符串化。

项是传递到卡组件中的整个对象，您正试图在卡组件的

h1标记中作为值进行渲染。您应该在h1中显示对象的某些属性值。e、 g this
this.props.value[0]
将显示h1中的第一个属性值

class Card extends React.Component {   
  render() {
    return (
      <div>
      <h1>{this.props.value[0]}</h1>
           <img src={this.props.src}/>
           </div>
    
    );
  }
}
export default Card;

类卡扩展了React.Component{
render（）{
返回(
{this.props.value[0]}
);
}
}
导出默认卡；
嗨！您是opp var包含和数组还是对象？在任何情况下，如错误消息所建议的，您都试图直接显示对象和数组。通过指定要显示的属性/索引，然后指定要显示的属性，您应该更准确。您好，opp是一个对象而不是数组，我将尝试一些代码编辑，看看这是否解决了问题，感谢您的建议You's welcome@Yusuf这是解决方案显然我是在将opp对象的整个值推到h1标记中
class Card extends React.Component {   
  render() {
    return (
      <div>
      <h1>{this.props.value[0]}</h1>
           <img src={this.props.src}/>
           </div>
    
    );
  }
}
export default Card;