React JSX中对象迭代与列表渲染的常见陷阱与最佳实践

<MyCustomDialog>
{
<>
Object.keys(myFieldsObj).map((key, index) => {
    <div key={index}>
        <Field field={myFieldsObj[key]} />
    </div>
})
</>
}
</MyCustomDialog>

import React from 'react';
import ReactDOM from 'react-dom/client';

// MyCustomDialog 组件需要渲染其子元素
function MyCustomDialog({ children }) {
  // 使用一个语义化的元素（如 <section>）包裹 children
  // 这样可以避免在外部使用 React Fragment (<>)
  return <section>{children}</section>;
}

// Field 组件，用于显示字段值
function Field({ field }) {
  return <div>{field.value}</div>;
}

// 示例组件，用于演示对象迭代
function Example({ myFieldsObj }) {
  return (
    <MyCustomDialog>
      {/* 1. map 回调函数中添加 return 语句 */}
      {/* 2. key 直接应用于 Field 组件 */}
      {Object.keys(myFieldsObj).map((key, index) => {
        return <Field key={index} field={myFieldsObj[key]} />;
      })}
    </MyCustomDialog>
  );
}

// 示例数据
const myFieldsObj = {
  field1: { value: 1 },
  field2: { value: 2 },
  field3: { value: 3 }
};

// 渲染到 DOM
const rootNode = document.getElementById('root');
const root = ReactDOM.createRoot(rootNode);
root.render(<Example myFieldsObj={myFieldsObj} />);

import React from 'react';
import ReactDOM from 'react-dom/client';

// MyCustomDialog 组件保持不变
function MyCustomDialog({ children }) {
  return <section>{children}</section>;
}

// Field 组件现在接收一个包含 name 和 value 的 data 对象
function Field({ data }) {
  return (
    <div>
      <h4>{data.name}</h4>
      <p>{data.value}</p>
    </div>
  );
}

// 示例组件，现在接收一个数组作为 props
function Example({ myFields }) {
  return (
    <MyCustomDialog>
      {/* 迭代数组，使用 obj.id 作为 key */}
      {myFields.map(obj => {
        return <Field key={obj.id} data={obj} />;
      })}
    </MyCustomDialog>
  );
}

// 优化后的数据结构：包含唯一 ID 的数组
const myFields = [
  { id: 1, name: 'field1', value: 1 },
  { id: 2, name: 'field2', value: 2 },
  { id: 3, name: 'field3', value: 3 }
];

// 渲染到 DOM
const rootNode = document.getElementById('root');
const root = ReactDOM.createRoot(rootNode);
root.render(<Example myFields={myFields} />);