javascript - 使用 Javascript Map 和 Reduce 操作对象数组
问题描述
我已经这样做了:
import React from 'react';
const Header =(props)=>{
const courseRecord = props.course.map(line => line)
return(
<>
<h2> {courseRecord[0].name }</h2>
<h2> {courseRecord[1].name }</h2>
</>
)
}
const Part =(props) =>{
return(
<>
<p>{props.partName} {props.noOfEx}</p>
</>
)
}
const Content =(props) =>{
return(
<div>
{props.course
.map(kourse => kourse['parts']
.map(parti =><Part key={parti['id']} partName = {parti['name']} noOfEx = {parti['exercises']}/> )
)}
</div>
)
}
const Total =(props) =>{
// const numbers = props.course.parts;
const numbers = props.course.map(kourse => kourse['parts']);
var exTotal = numbers.reduce((totalExercises,currentValue) =>{
console.log("totalExercises " , totalExercises , " current value " ,currentValue, " Exercises ", currentValue[0][1])
return totalExercises * currentValue.exercises
},0 );
return(
<>
<p><b>Total of {exTotal} exercises</b></p>
</>
)}
const Course = (props) =>{
let records =props.course.length;
return(
<>
<h1>Web Development Curriculumn</h1>
<Header course={props.course} />
<Content course ={props.course}/>
<Total course ={props.course}/>
</>
)
}
const App = () => {
const course =[
{
id: 1,
name:'Half Stack application development',
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: 'Destructuring',
exercises: 14,
id: 4
}
]
},
{
name :'Node JS',
id: 2,
parts:[
{
name: 'Routing',
exercises: 3,
id: 1
},
{
name: 'middlewares',
exercises: 7,
id: 2
}
]
}
]
return <Course course={course} />
}
export default App;
我希望以这种方式格式化输出:
Web Development curriculum
Half Stack Application Development
Fundamentals of React 10
Using props to pass Data 7
State of Component 14
Destructuring 14
Total of 45 exercises
Node Js
Routing 3
Middlewares 7
total of 10 exercises
我得到这个:
Web Development Curriculumn
Half Stack application development
Node JS
Fundamentals of React 10
Using props to pass data 7
State of a component 14
Destructuring 14
Routing 3
middlewares 7
Total of NaN exercises
我该如何解决?
解决方案
courses
当你使用数组时,请使用复数,所以课程数组不应该是course
,只是循环似乎不正确,除了你的代码看起来很好。请检查以下示例代码。
import React from 'react';
const Header = ({ course }) => {
return (
<>
<h2> {course.name}</h2>
</>
);
};
const Part = (props) => {
return (
<>
<p>
{props.partName} {props.noOfEx}
</p>
</>
);
};
const Content = ({ course }) => {
return (
<div>
{course['parts'].map((parti) => (
<Part
key={parti['id']}
partName={parti['name']}
noOfEx={parti['exercises']}
/>
))}
</div>
);
};
const Total = ({ course }) => {
// const numbers = props.course.parts;
var exTotal = course['parts'].reduce((totalExercises, currentValue) => {
console.log(
'totalExercises ',
totalExercises,
' current value ',
currentValue,
' Exercises ',
currentValue
);
totalExercises = totalExercises + currentValue.exercises;
return totalExercises;
}, 0);
return (
<>
<p>
<b>Total of {exTotal} exercises</b>
</p>
</>
);
};
const Course = ({ courses }) => {
return (
<>
<h1>Web Development Curriculumn</h1>
{courses && courses.length
? courses.map((course, index) => (
<div key={index}>
<Header course={course} />
<Content course={course} />
<Total course={course} />
</div>
))
: null}
</>
);
};
const App = () => {
const courses = [
{
id: 1,
name: 'Half Stack application development',
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: 'Destructuring',
exercises: 14,
id: 4,
},
],
},
{
name: 'Node JS',
id: 2,
parts: [
{
name: 'Routing',
exercises: 3,
id: 1,
},
{
name: 'middlewares',
exercises: 7,
id: 2,
},
],
},
];
return <Course courses={courses} />;
};
export default App;
推荐阅读
- docker - 在 Heroku 上部署 Net core 5.0 API 失败并出现 Docker 错误:无法启动 Kestrel
- smartcontracts - 带有 OpenZeppelin 合约的 Tron 网络
- kotlin - 如何在 Android Studio 中实现 Admob 插页式广告 - Kotlin
- javascript - 如何在javascript倒计时上实现开始和停止按钮
- python - 来自视频文件的 Python 4 字符编解码器
- node.js - 如何在使用猫鼬创建的用户集合内的数组中获取特定项目?
- node.js - 如何在 AWS EC2 上将 Tensorboard 扩展安装到 Jupyter Lab?
- discord.py - (discord.py) Client.fetch_channel() 和 Client.get_channel() 的区别
- python - BeautifulSoup 4:AttributeError:NoneType 没有属性 find_next
- merge - 在 SharePoint 2010 中合并多个列表