React输入字段无法渲染求助：解析对象生成HTML元素失败

我正尝试解析对象以渲染HTML元素，但无法显示任何HTML元素，认为代码中的return语句存在问题。

原代码如下：

export default function App() {
  const [state, setState] = useState({});
  const handleChange = (e) => {
    setState({
      [e.event.name]: e.target.value
    });
  };
  const expractCompont = (component) => {
    switch (component.type) {
      case "textfield":
        return (
          <>
            <label>{component.label}</label>
            <input type="text" name={component.id} onchange={handleChange} />
          </>
        );

      case "number":
        return (
          <>
            <label>{component.label}</label>
            <input type="number" name={component.id} onchange={handleChange} />
          </>
        );

      case "select":
        return (
          <>
            <label>{component.label}</label>
            <select name={component.id} id={component.id}>
              {component.values.map((item, index) => (
                <option value={item.value} key={index}>
                  {item.label}
                </option>
              ))}
            </select>
            <input
              type="number"
              name={component.field_107we45}
              onchange={handleChange}
            />
          </>
        );
      default:
        return <></>;
    }
  };

  const renderComponents = (components) => {
    for (let index = 0; index < components.length; index++) {
      const element = components[index];
      expractCompont(element);
    }
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {renderComponents(data.components)}
    </div>
  );
}

预期输出：显示输入框、选择框等组件

核心错误点 #

1. renderComponents未返回JSX元素
   原函数用for循环调用expractCompont生成组件，但没有收集并返回这些组件。React需要接收JSX元素数组才能渲染，因此需改用map遍历数组并返回结果。

2. 事件处理属性错误

   • React事件采用驼峰命名，onchange需改为onChange，否则事件无法触发。
   • handleChange中e.event.name是错误写法，正确应为e.target.name，事件对象的target属性才是触发事件的DOM元素。

3. 状态更新丢失数据
   原setState直接替换整个state对象，会覆盖之前的状态。需合并原有状态，使用setState(prev => ({...prev, [e.target.name]: e.target.value}))。

4. select组件内input的name属性问题
   component.field_107we45写法不严谨，需确保组件对象存在该属性，否则可调整为component.id等合理字段。

修复后的代码 #

import { useState } from "react";

export default function App() {
  const [state, setState] = useState({});
  
  // 修复事件处理函数，合并状态
  const handleChange = (e) => {
    setState(prevState => ({
      ...prevState,
      [e.target.name]: e.target.value
    }));
  };
  
  const extractComponent = (component) => { // 修正函数名拼写
    switch (component.type) {
      case "textfield":
        return (
          <>
            <label>{component.label}</label>
            <input type="text" name={component.id} onChange={handleChange} />
          </>
        );

      case "number":
        return (
          <>
            <label>{component.label}</label>
            <input type="number" name={component.id} onChange={handleChange} />
          </>
        );

      case "select":
        return (
          <>
            <label>{component.label}</label>
            <select name={component.id} id={component.id} onChange={handleChange}>
              {component.values.map((item, index) => (
                <option value={item.value} key={index}>
                  {item.label}
                </option>
              ))}
            </select>
            {/* 确保component存在对应属性，否则用component.id兜底 */}
            <input
              type="number"
              name={component.field_107we45 || component.id}
              onChange={handleChange}
            />
          </>
        );
      default:
        return null;
    }
  };

  // 改用map返回JSX数组，添加key确保React渲染稳定
  const renderComponents = (components) => {
    return components.map((element, index) => (
      <div key={index}>{extractComponent(element)}</div>
    ));
  };
  
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {renderComponents(data.components)}
    </div>
  );
}

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