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: 'Node.js',
id: 2,
parts: [
{
name: 'Routing',
exercises: 3,
id: 1
},
{
name: 'Middlewares',
exercises: 7,
id: 2
}
]
}
]
我正在嘗試渲染一個看起來像這樣的組件：
- 半堆疊應用程式開發 React 基礎知識：10 使用 props 傳遞資料：7 組件狀態：14 總練習：31 Node.js 路由：3 中間件：7 總練習：10
使用以下組件：
常量課程 = ({course}) => {
return(
<ul>
{course.map(c => (
<>
<li>{c.name}</li>
<ul>
{c.parts.map(p =>
<li>{p.name}: {p.exercises} {p.exercises.reduce((sum, item) => sum = item, 0))(</li>)}
</ul>
</>
))}
</ul>
)
}
但是，組件不會呈現，因為它說 p.exercises.reduce 不是函式。
我如何渲染每個部分之后的練習總量？
uj5u.com熱心網友回復：
您將無法減少數字（練習是數字而不是陣列），因此您可能必須將渲染更改為類似的內容（如果我理解您想要正確執行的操作）：
return(
<ul>
{course.map(c => (
<>
<li>{c.name}</li>
<ul>
{c.parts.map(p =>
<li>{p.name}: {p.exercises} {c.parts.reduce((sum, item) => sum = item.exercises, 0))(</li>)}
</ul>
</>
))}
</ul>
)
讓我知道這個是否奏效！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466630.html
標籤：javascript 数组 反应
上一篇：如何在reactjs中將類別過濾后的原始狀態設定為最低價格
下一篇：如何獨立設定按鈕點擊反應？