React渲染过滤后XML数组数据无输出/报错问题求解

尝试将过滤后的XML数组格式数据渲染到React页面，数据结构如下：

编写代码后出现两类问题：

• 页面无任何渲染内容
• 抛出resValue "cannot be used as a child" 类错误

• 渲染逻辑位置错误：列表渲染的JSX写在了handleRes点击事件函数内，事件函数返回的内容不会被React挂载渲染，所有展示内容必须写在组件主return块中，这是页面空白的核心原因
• state初始值类型不匹配：resValue用于存储解析后的XML节点数组，初始值却设为空字符串""，组件首次加载时调用数组方法会触发类型错误
• 非法渲染值：getElementsByTagName返回的是XML解析后的节点对象，React不支持直接渲染普通对象作为子元素，这就是"cannot be used as a child"报错的直接来源
• 逻辑冗余：事件函数中setResVal使用函数式更新无必要，且state更新为异步行为，set之后立刻打印state拿到的是旧值，无法获取最新结果

1. 将resValue初始值改为空数组[]，匹配后续存储的数组类型
2. 移除事件函数中的渲染逻辑，事件函数仅负责触发state更新
3. 将结果列表的渲染逻辑移到组件主return块中
4. 渲染XML节点时，读取节点上的具体基础类型属性（字符串、数字），不要直接传入整个节点对象
5. 补充缺失的函数闭合语法，修正函数调用逻辑

import { useState } from 'react';

// PoB编码解码逻辑
function decodePoBString(str) {
  return inflateSync(new Buffer(str, "base64")).toString()
}

// XML解析逻辑
function loadPoBXml(str) {
  const res = decodePoBString(str)
  const xml = new XMLParser().parseFromString(res);   
  const gemList = xml.getElementsByTagName('Gem');
  return gemList;
}

export default function Home() {
  // 结果数组初始值设为空数组
  const [resValue, setResVal] = useState([]);
  const [inputValue, setInputValue] = useState("");

  // 确认按钮逻辑：仅做解析+更新state，不处理渲染
  const handleRes = () => {
    const parsedGemList = loadPoBXml(inputValue);
    setResVal(parsedGemList);
  }

  // 输入框值更新逻辑
  const handleUserInput = (e) => {
    setInputValue(e.target.value);
  };

  // 重置逻辑
  const resetInputField = () => {
    setInputValue("");
    setResVal([]);
  };

  return (
    <>
      <div className="InsideContent">
        <Input
          className="input1"
          placeholder="Paste PoB Code"
          name="pobCode"
          value={inputValue}
          onChange={handleUserInput}
        />
      </div>

      <div className="InsideContent">
        <Button1 onClick={handleRes}>
          Confirm
        </Button1>
        <Button2 onClick={resetInputField}>Reset</Button2>
      </div>

      {/* 结果渲染区域，放在主return内才会被React挂载 */}
      <div>
        <ul>
          {resValue.map((gemItem, index) => {
            // 注意：不要直接写{gemItem}，需取节点下的具体属性渲染
            // 可先打印gemItem确认结构，以下为示例字段，按实际解析结果调整
            return (
              <li key={index}>
                宝石名称：{gemItem.attributes?.name || gemItem.name || ''}
                宝石等级：{gemItem.attributes?.level || gemItem.level || ''}
              </li>
            )
          })}
        </ul>
      </div>
    </>
  );
}

• 渲染前可先打印解析后的节点数组，确认每个节点的属性结构，只要渲染内容为字符串、数字等React支持的基础类型，就不会触发子元素类型错误
• 若在浏览器端运行，注意Buffer需要引入对应polyfill，也可替换为pako库实现inflate解码，兼容性更好
• 列表渲染时建议给每个<li>添加唯一key属性，避免控制台警告

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