映射一个反应组件不会返回到父组件

Question

我有两个组件。一个组件 Profileviewlist 是 Profileview 的子组件，在 Profileviewlist 内映射组件返回 Profileview 外的子组件。我一直在这个网站上寻找这个问题。我正在寻找一种方法来让Profileviewlist 的组件在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} />
      </>
    )
  }
}

** 个人资料视图列表：**

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} />
    })
  )
}

Parental Hierarchy（我希望组件以 div 的形式组织的方式）每个组件都指向它的子组件：

个人资料视图：-> Profileviewlist:-> Profileviewchild：

Answer 1

据我了解，您有一个个人资料列表，您应该创建一个三元运算符来检查 persons 是否不为空并且有一个长度然后映射到它们，否则会显示错误。

这样的事情应该可以工作：

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>
  )
}

编辑： 检查共享图片后，问题是您在Profileviewheader 上分配了id="profileview"。你应该分配这个组件。

Answer 2

问题是由persons 在Profileview 和Profileviewlist 中发生的

这里persons 的类型似乎是Object。

所以persons.map() 永远不会工作，因为map 是Array 而不是Object 的方法。理想的方式是persons 有list 键域。

{
   status: 'success',
   list: [...] // persons list
}

   ...
   <Profileviewlist persons={persons.list} display_selector={display_selector} />
   ...