反应：多维对象的 {} 之间的值未呈现答案

【问题标题】：React: Values between {} of a multidimensional object not rendering反应：多维对象的 {} 之间的值未呈现
【发布时间】：2021-03-31 12:18:19
【问题描述】：

我无法解决且找不到解决方案的新手问题。花括号之间的值未在组件内容和组件总计中呈现。我检查了 JSX 规则，但我遗漏了一些东西。

import React from 'react'

const App = () => {
    const course = {
        name: 'Half Stack application development',
        parts: [
            {
                name: 'Fundamentals of React',
                exercises: 10
            },
            {
                name: 'Using props to pass data',
                exercises: 7
            },
            {
                name: 'State of a component',
                exercises: 14
            }
        ]
    }

    const Header = () => {
        //const course = 'Half Stack application development'
        return (<div>{course.name}</div>)
    }

    const Content = () => {
        return (
            <div>
                <Part1/>: {course.parts[[0].exercises]} exercises.<br />
                <Part2/>: {course.parts[[1].exercises]} exercises.<br />
                <Part3/>: {course.parts[[2].exercises]} exercises.<br />
            </div>
        )
    }

    const Part1 = () => {
        //const part1 = 'Fundamentals of React'
        return (<>{course.parts[[0].name]}</>)
    }

    const Part2 = () => {
        //const part2 = 'Using props to pass data'
        return (<>{course.parts[[1].name]}</>)
    }
    const Part3 = () => {
        //const part3 = 'State of a component'
        return (<>{course.parts[[2].name]}</>)
    }

    const Total = () => {
        //const exercises1 = 10
        //const exercises2 = 7
        //const exercises3 = 14
        return(
            <div>
                Number of exercises: {course.parts[[0].exercises]+ course.parts[[1].exercises] + course.parts[[2].exercises]}.
            </div>
        )
    }

    return (
        <div>
            <Header></Header>
            <Content></Content>
            <Total></Total>

        </div>
    )
}

export default App

上面的脚本在浏览器上渲染这个，值应该出现在第 2,3,4 行中的“：练习”之前：

Half Stack application development
: exercises.
: exercises.
: exercises.
Number of exercises: NaN.

【问题讨论】：

您的数组索引访问语法错误（全部错误）。 {course.parts[[0].exercises]} 必须是 {course.parts[0].exercises}

标签： javascript reactjs jsx

【解决方案1】：

您的accessors 错误。您目前正在访问您的 course 部分，例如

course.parts[[index].exercises] - 这将产生undefined，添加undefined 将产生NaN。

您需要访问parts，如下所示：-

course.parts[index].exercises

【讨论】：

【解决方案2】：

给你

import React from 'react'

const App = () => {

    const course = {
        name: 'Half Stack application development',
        parts: [
            {
                name: 'Fundamentals of React',
                exercises: 10
            },
            {
                name: 'Using props to pass data',
                exercises: 7
            },
            {
                name: 'State of a component',
                exercises: 14
            }
        ]
    }


    const Header = () => {

        //const course = 'Half Stack application development'

        return(
            <div>
                {course.name}
            </div>

        )
    }

    const Content = () => {


        return(
            <div>
                <Part1/>: {course.parts[0].exercises} exercises.<br />
                <Part2/>: {course.parts[1].exercises} exercises.<br />
                <Part3/>: {course.parts[2].exercises} exercises.<br />
            </div>
        )
    }

    const Part1 = () => {
        //const part1 = 'Fundamentals of React'
        return (
            <>
                {course.parts[0].name}
            </>
        )
    }

    const Part2 = () => {
        //const part2 = 'Using props to pass data'
        return (
            <>
                {course.parts[1].name}
            </>
        )
    }
    const Part3 = () => {
        //const part3 = 'State of a component'
        return (
            <>
                {course.parts[2].name}
            </>
        )
    }

    const Total = () => {

        //const exercises1 = 10
        //const exercises2 = 7
        //const exercises3 = 14

        return(
            <div>
                Number of exercises: {course.parts[0].exercises+ course.parts[1].exercises + course.parts[2].exercises}.
            </div>
        )
    }

    return (
        <div>
           
            <Header></Header>
            <Content></Content>
            <Total></Total>

        </div>
    )

}

export default App;

【讨论】：