如何在Next.js/React.js中基于JSON对象动态渲染表单组件

JavaScript 对象本身不支持 map 方法，你需要先将对象的键值对转换为可遍历的数组，常用方案是使用 Object.entries()，它会返回一个包含对象所有 [key, value] 键值对的数组，之后即可用 map 遍历处理。

具体实现步骤 #

• 从 URL 参数中筛选出目标运动的配置对象（假设该对象名为 sportConfig）
• 用 Object.entries(sportConfig) 将对象转换为键值对数组
• 遍历数组，当值为1时渲染 FormBox 组件

示例代码 #

import registerData from './register.json';
import FormBox from './FormBox';
import { useRouter } from 'next/router';

const SportForm = () => {
  const { sportId } = useRouter().query;
  const sportConfig = registerData[sportId]; // 筛选对应运动的配置对象

  if (!sportConfig) return <div>配置不存在</div>;

  return (
    <div className="form-container">
      {Object.entries(sportConfig).map(([key, value]) => {
        if (value === 1) {
          return <FormBox key={key} formIdentifier={key} />;
        }
        return null;
      })}
    </div>
  );
};

export default SportForm;

补充说明 #

• 若只需处理键或值，也可选用 Object.keys()（仅返回键数组）或 Object.values()（仅返回值数组），但此处需同时判断键和值，Object.entries() 是最优选择
• 必须给每个渲染的 FormBox 添加唯一 key 属性，避免 React 警告
• 建议先判断 sportConfig 是否存在，防止空对象/undefined 导致的报错

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