javascript - 无法读取未定义的属性 0 - 即使使用条件渲染

Question

在以下情况下，我无法意识到自己做错了什么：

我有一个名为 的数组，arrayOfChildren它的启动方式如下：

const [arrayOfChildren,setArrayOfChildren]=React.useState([])

给定一个处理函数，我想将一个包含对象的数组推送到 中arrayOfChildren，该数组随后将具有以下形式：

const arr=[[{"A":"trial","B":"test"},{"hey":"Test"}],[{"A":"trial","B":"test"},{"hey":"Test"}],[{"A":"trial","B":"test"},{"hey":"Test"}],[{"A":"trial","B":"test"},{"hey":"Test"}]]`

, 所以推入数组的形式是[{},{}]

我的处理程序如下：

const handleAdditionOfSubGroup=(addChildGroup)=>{
        setArrayOfChildren([
            ...arrayOfChildren,
            addChild
        ])            
    }

这就是我返回它的方式：

{arrayOfChildren.length>0 && 
          arrayOfChildren.map((item,index)=>{

              return <MyResponsivePieChart 
              ourObject={item[index]}
              key={'item-' + item[0][0].id}
              />
          })}

当我尝试通过记录数组来查看发生了什么时，它总是显示为空，即使addChild显示正确。谢谢 ！

标签： javascriptreactjs

Answer 1

我相信以下代码中的更正会有所帮助。

{arrayOfChildren.map((item,index)=>{
          return <MyResponsivePieChart 
          ourObject={item[0]}
          key={'item-' + item[0].id}
          />
      })}