对如何将信息传递给组件reactjs表示怀疑

如何解决对如何将信息传递给组件reactjs表示怀疑

我将数组传递给组件，并通过foreach对其进行遍历，它正确地向我传递了对象，但是在组件中向我显示未定义，在控制台中，当传递给组件时，foreach可以正常工作给了我未定义道具的错误

import React from 'react' import ReactDOM from 'react-dom' const Header =(props)=>{ return(
<h1>{props.course.name}</h1>
) } const Content =(props)=>{ //probar pasar el course para sacar del objeot el arreglo return(

<div>
  {props.parts.map((value)=>
  <Part key={value.id} part={value.name} exercises={value.exercises}/>)}
</div>
) } const Total =(props)=>{//no se debe usar indice de arreglo para key por cmbios en arrglo // const total =0 //props.parts.forEach(element => {total +=element.exercises // console.log(parts) console.log(props.parts,'prosp') const total= props.parts.reduce((totalA,valorAC)=>
{ /* console.log(totalA.exercises,'totalA valora q se imprime como q es total a') console.log(valorAC.exercises,'valorAC valora q se imprime como q es ACumulador') console.log(totalA.exercises+valorAC.exercises,'Suma Probadni') */ return { exercises:
totalA.exercises + valorAC.exercises} }) const total2 = props.parts.reduce((totalA,valorAC)=> totalA+valorAC.exercises,0) /* console.log(total2,'total 2 para ver si suma') console.log(total.exercises) */ //}); return(
<h4>
  Total of exercises {total.exercises}
</h4>
) } const Part = (props)=>{ return(
<p>
  {props.part} {props.exercises}
</p>
) } const Course=(props)=>{ return (
<div>
  {console.log(props.course,'header de curso q se pasa')}


  <Header course={props.course}/> {console.log(props.course.parts,'partes de curso q se pasa')}
  <Content parts={props.course[1].parts} index={props.course.index}/>

  <Total parts={props.course[1].parts}/>

</div>
) } const App = () => { // const course = 'Half Stack application development' const course ={ id:1,name :'Half Stack application development',parts:[ { id:1,name:'Fundamentals of React',exercises: 10 },{ id:2,name:'Using props to pass data',exercises:7
},{ id:3,name:'State of a component',exercises:14 } ] } const courses = [ { name: 'Half Stack application development',id: 1,parts: [ { name: 'Fundamentals of React',exercises: 10,id: 1 },{ name: 'Using props to pass data',exercises: 7,id: 2
},{ name: 'State of a component',exercises: 14,id: 3 },{ name: 'Redux',exercises: 11,id: 4 } ] },{ name: 'Node.js',id: 2,parts: [ { name: 'Routing',exercises: 3,{ name: 'Middlewares',id: 2 } ] } ] //retorno de curso
con arreglos return (
<Course course={courses.forEach(coursef=>{ console.log(coursef,'curso que retorna')// return coursef })} /> ) /* return (
  <Course course={course}/> ) */ } ReactDOM.render(

  <App />,document.getElementById('root'))

解决方法

{courses.map(course => <Course course={course} />)}

在课程数组上使用此地图，即调用地图中的<Course />组件