React函数返回多个对象仅渲染一个的技术问题求助

嘿，我看了你的代码，马上就发现问题所在了——你踩了JavaScript逗号表达式的小坑！

问题根源 #

在你的JavaScriptLessonObject函数里，你直接返回了两个用逗号分隔的对象：

return (
  { /* 第一个对象 */ },
  { /* 第二个对象 */ }
);

在JavaScript中，这种写法属于逗号表达式，它的规则是：执行所有表达式，但只返回最后一个表达式的结果。所以你的函数实际上只返回了第二个titleName: "JSON2"的对象，这就是为什么页面只显示这一个选项的原因。

修复步骤 #

1. 修改对象返回逻辑，用数组包裹所有对象

首先调整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;

2. 调整reducer中的初始状态

在lesson-reducer.js里，现在JavaScriptLessonObject()会直接返回一个数组，所以你不需要再把它嵌套到另一个数组里了，否则会变成二维数组，导致后续遍历出问题：

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
});

3. 可选：优化key的使用（React最佳实践）

在Lesson.jsx的map遍历中，目前用index作为key，虽然当前场景能运行，但这不是React推荐的做法。如果可以的话，给每个lesson对象添加一个唯一的id属性，然后用这个id作为key，这样在列表更新时性能会更好：

// 在JavaScriptLessonObject的返回数组中添加id
return [
  {
    id: 'json-lesson-1', // 唯一标识
    titleName: "JSON1",
    // ...其他属性
  },
  {
    id: 'json-lesson-2',
    titleName: "JSON2",
    // ...其他属性
  }
]

// 然后在Lesson.jsx的map中使用item.id作为key
<ul key={item.id}>
  {/* ...其他内容 */}
</ul>

验证效果 #

做完这些修改后，你的lessonsTitle数组里就会包含两个完整的对象，map遍历的时候就能渲染出JSON1和JSON2两个选项了，点击切换也能正常显示对应的描述内容。

内容的提问来源于stack exchange，提问作者Synchro