Reactjs 映射react组件不会'；t返回到父组件

我有两个组件。一个组件

Profileview列表

是

Profileview的子组件

映射

Profileview列表中的组件

返回

Profileview

之外的子组件。我一直在这个网站上寻找这个问题。我正在寻找一种方法来获取

Profileview列表

的组件，以便在

Profileview

中进行渲染。任何见解都有帮助

注意：组件渲染，但不在父级（profileview）中

纵断面图：

import React from 'react'
import Profileviewheader from './profileviewheader'
import Profileviewlist from './Profileviewlist'

export default function Profileview({ persons, display_selector }) {
  if (persons == null || persons.status == "error") {
    return (
      <Profileviewheader />
    )
  }
  else {
    console.log("rendering list")
    console.log()
    return (
      <>
        <Profileviewheader />
        <Profileviewlist persons={persons} display_selector={display_selector} />
      </>
    )
  }
}

从“React”导入React
从“./Profileviewheader”导入Profileviewheader
从“/Profileviewlist”导入Profileviewlist
导出默认函数Profileview（{persons，display_selector}）{
if（persons==null | | persons.status==error）{
返回(
)
}
否则{
console.log（“呈现列表”）
console.log（）
返回(
)
}
}

**纵断面图列表：**

import React from 'react'
import Profileviewchild from './profileviewchild';

export default function Profileviewlist({ persons, display_selector }) {
  return (
    persons.map(person => {
      return <Profileviewchild person={person} change_selected={display_selector} />
    })
  )
}

从“React”导入React
从“/Profileviewchild”导入Profileviewchild；
导出默认函数Profileviewlist（{persons，display_selector}）{
返回(
persons.map（person=>{
返回
})
)
}

父层次结构（我希望组件以div的形式进行结构化）每个组件指向其子组件：

import React from 'react'
import Profileviewheader from './profileviewheader'
import Profileviewlist from './Profileviewlist'

export default function Profileview({ persons, display_selector }) {
  if (persons == null || persons.status == "error") {
    return (
      <Profileviewheader />
    )
  }
  else {
    console.log("rendering list")
    console.log()
    return (
      <>
        <Profileviewheader />
        <Profileviewlist persons={persons} display_selector={display_selector} />
      </>
    )
  }
}

Profileview:-> Profileviewlist:->

---

Profileviewchild:

据我所知，您有一个个人档案列表，您应该创建一个三元运算符，用于检查

persons

是否不为null，并有一个长度，然后映射到其中，否则显示错误

像这样的方法应该会奏效：

export default function Profileview({ persons, display_selector }) {
  return (
    <div id="profileview">
      <Profileviewheader />
      {persons.length ? persons.map(person => (
        <Profileviewchild person={person} change_selected={display_selector} />
      )) :
        <p>{persons.status}</p>}
    </div>
  )
}

export default function Profileview（{persons，display_selector}）{
返回(
{persons.length？persons.map（person=>(
)) :
{persons.status}
}
)
}

编辑：

---

检查共享图片后，问题是您在

profileview标题上分配了
id=“profileview”
。您应该分配此组件。
问题由
Profileview
和
Profileview列表中的
人员发生

这里的
人
的类型似乎是
对象

因此
persons.map（）
永远不会起作用，因为
map
是
Array
而不是
Object
的方法。理想的方法是
人员
拥有
列表
关键字段

{
状态：“成功”，
列表：[……]//人员列表
}

。。。
...
这么多的
Profileview
，你能用
子项和
父项
单词更好地解释吗？Profileview是整个父项。纵断面图列表是profileview的子级。profileview子级是profileviewlist的子级。类似这样的内容：{Profileview:{Profileviewlist:{Profileviewchild}}}您的
Profileviewlist
是否呈现？您是否在
控制台中获得
console.log（“渲染列表”）
？@TaghiKhavari是，所有内容都渲染。唯一的问题是渲染的元素不在profileview中。Persons是一个对象数组，但也可能只是一个对象。这就是为什么我要检查它是否有.status字段。Persons可以是{user:{moredata:“123”}或{status:“error”}Persons可以是数组和对象，当出现错误时，他可以传递
person.status=“error”
Profileviewchild仍然出现在纵断面图之外。在查看dom时。除此之外，切掉中间人profileviewlist的好方法。是的，它只是不必要的。你能分享你的意思吗？你能分享
Profileviewheader
吗？我想你能说出
Profileviewheader
上的
id=“profileview”
？再次尝试回答并显示结果。