reactjs - Reaccionar: la matriz anidada se muestra como indefinida al intentar mapear

Mi matriz anidada pasada desde accesorios no se puede asignar. Intentando mapear tareas. Array.isArray() devuelve verdadero en el componente secundario, por lo que no estoy seguro de por qué no se puede asignar.

Actualizado según sugerencias, pero sigue dando el mismo error

Matriz:

  export const PeopleArray = [
        {name: 'Parent',
         tasks: [ 
             {category: 'Category1',
             },
             {category: 'Category2',
             },
             {category: 'Category3',
             },
             {category: 'Category4',
             },
             {category: 'Category5',
             },
             {category: 'Category6',
             },
             {category: 'Category7',
             },
             {category: 'Category8',
             },
             {category: 'Category9'
             },
         ]
        },

Padre:

                    PeopleArray.map( (person,i) => {
                        return (
                            <PeopleCard
                              key={i} 
                              name={person.name} 
                              tasks={person.tasks}
                            />
                        )
                    })

Niño

<ul className='taskList'>
    {    
         this.props.tasks.map( (task,i) => {
              return(
                 <li key={i}>{task.category}</li>
               )
         })
    } 

¿Has llamado a super(props) en el constructor secundario?

-Albin wärme

27/03/2021 a las 15:49

Hola, sí.constructor(props) { super(props); this.state = { cardStyle: 'peopleCardBody hideCardBody', arrowStyle: 'arrowDefault' }; }

- Matt Allen

27/03/2021 a las 15:52

Veo que no devuelves nada de tu segunda función de mapa. Cambie los corchetes { } para que sean paréntesis para retornos automáticos de una línea o agregue una declaración de devolución para ver si eso soluciona el problema

-Albinwärme

27/03/2021 a las 15:55

------------------------------------

Debes encerrar la tarea entre { } . Actualice el componente secundario como:

<div className={this.state.cardStyle} >
        <ul>
              {    
                this.props.tasks.map( (task,i) => {
                     <li key={i}>{task.category}</li>
                })
               }
                     
       </ul>
 </div>

Además, la tarea es un objeto con categoría clave. Actualízalo.

1

Hola, completé esto, pero sigo recibiendo el mismo error.

- Matt Allen

27/03/2021 a las 16:04

------------------------------------

Asegúrese de devolver el valor del mapeo además de navegar a la categoría mediante curlies

<div className={this.state.cardStyle} >
        <ul>
              {    
                this.props.tasks.map( (task,i) => {
                     return <li>{task.category}</li>
                })
               }
                     
       </ul>
 </div>

------------------------------------

Qué tonto soy, llamé al componente secundario por segunda vez, pero olvidé pasarle los accesorios. Por eso regresaba como indefinido; la matriz de accesorios no existía.