React - 使用对象内部的对象调用函数答案

【问题标题】：React - Calling a function with an object inside an objectReact - 使用对象内部的对象调用函数
【发布时间】：2021-03-11 11:24:56
【问题描述】：

我在其中创建了函数和对象，我试图在另一个对象中调用此函数我想在另一个函数中分隔对象，以便代码更易于阅读，但我只渲染一个对象而不是所有对象

JavaScript_Lessons_Objects.js

import {faDotCircle} from "@fortawesome/free-solid-svg-icons/faDotCircle";
import React from "react";

const one = "Robby";

function JavaScriptLessonObject() {
    return (
        {
            titleName: "JSON1",
            iconName: faDotCircle,
            description: [
                <span className="yourClass">{one}</span>,
                ` advanced diverted domestic sex repeated bringing you old.`
            ],
        },
            {
                titleName: "JSON2",
                iconName: faDotCircle,
                description: [
                    <span className="yourClass">{one}</span>,
                    ` advanced diverted domestic sex repeated bringing you old.`
                ],
            }
    );
}

export default JavaScriptLessonObject;

lesson-reducer.js

import React from 'react';
import JavaScriptLessonObject from "./Coding_Lessons_Objects/JavaScript_Lessons_Objects";

const ADD_LESSON = "ADD_LESSON";

let initialState = {
    lessonsTitle: [
        JavaScriptLessonObject()
    ],

};

export const lessonReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_LESSON:
            return {
                ...state, lessonsTitle: action.lessonsTitle
            };
        default:
            return state;
    }
};

export const getLessons = (lessonsTitle) => ({
    type: ADD_LESSON, lessonsTitle
});

Lesson.jsx

import React from 'react';
import less from "./css/lesson.module.css";
import "./css/betaLesson.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Navbar } from "../../../Navbar/Navbar";
import { faDotCircle } from "@fortawesome/free-solid-svg-icons/faDotCircle";

export class Lessons extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            indexDescription: 0,
        }
    }

    render() {
        const listLessons = this.props.lesson.map((item, index) => {
            return (
                <ul key={index}>
                    <li className={less.sidebar_list} onClick={() => {
                        this.setState({ indexDescription: index })
                    }}>
                        <div>
                            <FontAwesomeIcon className={less.item_icon} icon={item.iconName} />
                        </div>

                        <div className={less.titleName}>
                            <p>{item.titleName}</p>
                        </div>
                    </li>
                </ul>
            );
        });

        return (
            <>
                <div className="abc">
                    <Navbar color="blue" bg="tomato" centerFlexNavbarContainer="flex"
                        navbarSearchPage="Search" navbarHomePage="Home" centerHeadlineNavbarColumn="center" />
                    <div className={less.wrapper}>

                        <div className={less.sidebar}>
                            <div>
                                {listLessons}
                            </div>
                        </div>

                        <div className={less.main_content}>
                            <div className={less.main_inside_content}>
                                <div className={less.header}>
                                    <div>
                                        <h2>JavaScript JSON Reference</h2>
                                    </div>
                                </div>
                                <div className={less.info}>
                                    <div className={less.description}>
                                        <p>
                                            {
                                                this.props.lesson[this.state.indexDescription]["description"]
                                            }
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

我没有得到两个对象 JSON1 和 JSON2，我只得到 JSON2 https://ibb.co/4KT9qMH

【问题讨论】：

标签： javascript reactjs object redux react-redux

【解决方案1】：

function JavaScriptLessonObject() {
    return (
        [{
            titleName: "JSON1",
            iconName: faDotCircle,
            description: [
                <span className="yourClass">{one}</span>,
                ` advanced diverted domestic sex repeated bringing you old.`
            ],
        },
            {
                titleName: "JSON2",
                iconName: faDotCircle,
                description: [
                    <span className="yourClass">{one}</span>,
                    ` advanced diverted domestic sex repeated bringing you old.`
                ],
            }]
    );
}

尝试像这样在函数中返回一个数组 ^

let initialState = {
    lessonsTitle: JavaScriptLessonObject()

};

并以这种 ^ 方式调用它。

【讨论】：