React应用动态渲染JSON生成HTML时遇React子元素无效错误

嘿，我一眼就看穿问题啦——你现在是直接把整个带name、fee、gst这些键的JavaScript对象当成React子元素去渲染了，但React根本不允许这么做！它只认字符串、数字、React元素、合法子元素组成的数组，或者null/undefined这类值。

具体解决方案 #

1. 提取对象属性来渲染 #

别直接扔整个对象，你得从里面拿出具体要展示的属性值。比如你想显示表单名称、费用和票数，就单独渲染这些属性。

2. 修改你的getForms函数 #

我给你调整了代码示例，你照着改就行：

getForms(categoreis, id1){
  let ind = 0;
  const list1 = [];
  const list2 = [];
  console.log(JSON.stringify(categoreis));
  
  categoreis.forEach((category, index) => { // 用forEach更贴合这里的场景，map是用来返回新数组的
    if(category.hasOwnProperty('no_of_tickets')){
      // 把对象转成React元素，提取需要展示的属性
      const formItem = (
        <div key={category.formid} className="form-item"> {/* 用formid当key比index更靠谱 */}
          <h3>{category.name}</h3>
          <p>费用: ${category.fee}</p>
          <p>GST: {category.gst}%</p>
          <p>可用票数: {category.no_of_tickets}</p>
          {/* 这里可以添加你需要的其他表单内容 */}
        </div>
      );
      
      if(ind === 0){
        list1.push(formItem);
        ind++;
      } else {
        list2.push(formItem);
      }
    }
  });
  
  // 最后返回要渲染的内容
  return (
    <div className="forms-container">
      <section className="first-form">{list1}</section>
      <section className="other-forms">{list2}</section>
    </div>
  );
}

额外小提示 #

• 遍历生成React元素时，一定要加key属性，优先用数据里的唯一标识（比如category.formid）代替数组下标index，这样React能更高效地更新DOM。
• 如果想把对象的所有属性都列出来，不用一个个手写，可以用Object.entries遍历：

// 快速渲染对象的所有键值对
<div className="object-details">
  {Object.entries(category).map(([key, value]) => (
    <p key={key}>
      <strong>{key}:</strong> {value}
    </p>
  ))}
</div>

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