React项目遍历配置对象数组渲染内容失败，求解决方案

问题根源梳理 #

1. forEach无返回值：forEach仅执行遍历操作，不会返回新数组。你在回调函数里的return对loopMessages函数没有任何作用，最终loopMessages返回undefined，导致页面无内容渲染。React渲染列表需要的是包含JSX元素的数组，应该用map方法替代。
2. 多余的Object.values处理：messages本身就是数组，无需用Object.values转换，直接遍历即可。
3. JSX变量未正确插值：渲染变量值必须用{}包裹（比如{value.headline}），否则会被当成纯文本字符串显示；同时要注意标签正确闭合（<p>对应</p>）。
4. 语法错误：loopMessages函数里多了一个多余的});，会导致代码执行报错。

修正后的代码示例 #

方式一：保留loopMessages函数

import styles from "./styles.css";
import messages from "../../config/messages.js";

const loopMessages = () => {
  // 用map遍历数组，返回JSX元素数组
  return messages.map((value, index) => (
    // 必须添加key属性，React列表渲染要求唯一标识
    <div key={index} className="message-item">
      <p>{value.headline}</p>
      <p>{value.problem}</p>
      <p>{value.fix}</p>
    </div>
  ));
};

const Guidlines = () => {
  return (
    <>
      <div className="sub-heading-container">
        <h3 className="sub-heading">Messages</h3>
      </div>
      <div className="guide-container">
        <div className="square">
          {loopMessages()}
        </div>
      </div>
    </>
  );
};

export default Guidlines;

方式二：直接在组件内遍历（更简洁）

import styles from "./styles.css";
import messages from "../../config/messages.js";

const Guidlines = () => {
  return (
    <>
      <div className="sub-heading-container">
        <h3 className="sub-heading">Messages</h3>
      </div>
      <div className="guide-container">
        <div className="square">
          {messages.map((value, index) => (
            <div key={index} className="message-item">
              <p>{value.headline}</p>
              <p>{value.problem}</p>
              <p>{value.fix}</p>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default Guidlines;

额外提示 #

• 列表项的key属性最好使用对象自身的唯一标识（比如每个消息的id），用index是临时方案，当列表元素顺序变化时可能引发性能问题。
• 把每个消息的三个字段包裹在一个div中，既保证DOM结构的合理性，也方便后续添加样式控制。

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