React循环渲染组件时持续报fields数组未定义错误求助

你的代码存在三个核心问题，导致fields数组报错：

• 未正确声明状态变量：useState解构时缺少const，在严格模式下会导致fields和setFields未被声明，触发未定义错误。
• 覆盖状态更新函数+直接修改状态：自定义了同名的setFields函数，覆盖了ReactuseState返回的状态更新方法；同时直接用fields.push修改原状态数组，违反React状态不可变原则，既不会触发组件重渲染，还会导致状态异常。
• 未处理输入值类型：输入框的value是字符串类型，直接用于循环条件可能引发逻辑错误（比如空字符串会被当作0处理）。

修复后的完整代码 #

import { useRef, useState } from 'react';
import SecondForm from './SecondForm';

function App() {
  const inputRef = useRef(null);
  // 修正：添加const声明状态变量
  const [fields, setFields] = useState([]);

  // 重命名函数，避免覆盖状态更新方法
  const generateFields = () => {
    // 修正：将输入值转为整数，同时做有效性判断
    const numberOfAngles = parseInt(inputRef.current.value, 10);
    if (isNaN(numberOfAngles) || numberOfAngles <3 || numberOfAngles>10) return;

    // 修正：创建新数组，通过setFields更新状态
    const newFields = [];
    for (let i = 1; i <= numberOfAngles; i++) {
      newFields.push(<SecondForm id={i} key={i} />);
    }
    setFields(newFields);

    // 也可以用更简洁的Array.from写法：
    // setFields(Array.from({length: numberOfAngles}, (_, idx) => 
    //   <SecondForm id={idx+1} key={idx+1} />
    // ))
  };

  return (
    <div className="app">
      <h1>Check is point inside of polygon or not</h1>
      <div className="start-form">
        <p>Select number from 3 to 10 for number of Polygon angles</p>
        <input
          type="number"
          id="nr-of-angles"
          name="nr-ofangles"
          min="3"
          max="10"
          ref={inputRef}
        />
        {/* 修正：绑定新的函数名 */}
        <button className="btn" onClick={generateFields}>
          Submit
        </button>
      </div>
      {/* 简化渲染逻辑 */}
      {fields}
    </div>
  );
}

export default App;

关键修复点说明 #

1. 正确声明状态：给useState解构添加const，确保变量被正确声明。
2. 避免状态直接修改：始终通过setFields更新状态，且更新时传入新数组（而非修改原数组），保证React能检测到状态变化并触发重渲染。
3. 输入值类型处理：用parseInt将输入字符串转为整数，同时添加有效性判断，避免无效值导致的异常。
4. 函数命名规范：重命名自定义函数，避免覆盖React提供的状态更新方法。

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