React中多项动态状态管理：避免在循环中声明useState的正确实践

'use client';
import { useState } from 'react';

function MyComponent() {
  const userInputs = ['hoge', '123', 'aaa']; // 假设这是需要创建状态的标识符

  // 错误示范：在循环中调用useState
  userInputs.forEach((element, index) => {
    // 这行代码会抛出错误，因为它违反了Hook的使用规则
    // const [userInput + index.toString(), setUserInput] = useState('');
  });

  return (
    // ... 组件渲染逻辑
    <div>
      {/* 无法在此处访问动态声明的状态 */}
    </div>
  );
}

import React, { useState } from 'react';

function DynamicInputsForm() {
  const userInputsData = ['hoge', '123', 'aaa']; // 初始输入项的标识符

  // 将所有输入项的状态存储在一个数组中，每个元素是一个对象
  // 每个对象包含一个id（标识符）和其对应的value（值）
  const [inputs, setInputs] = useState(
    userInputsData.map(id => ({ id: id, value: '' }))
  );

  // 处理单个输入框的值变化
  const handleInputChange = (index, newValue) => {
    // 更新状态时，必须创建新的数组副本以保持不可变性
    const newInputs = inputs.map((input, i) =>
      i === index ? { ...input, value: newValue } : input // 更新指定索引的项
    );
    setInputs(newInputs); // 更新整个状态数组
  };

  return (
    <div>
      <h2>动态输入表单</h2>
      {inputs.map((input, index) => (
        <div key={input.id}> {/* 使用id作为key，保证唯一性 */}
          <label>{input.id}: </label>
          <input
            type="text"
            value={input.value}
            onChange={(e) => handleInputChange(index, e.target.value)}
          />
          <p>当前值: {input.value}</p>
        </div>
      ))}
    </div>
  );
}

export default DynamicInputsForm;

// ItemInput.jsx
import React, { useState } from 'react';

function ItemInput({ label, initialValue }) {
  // 每个ItemInput组件都有自己的独立状态
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <label>{label}: </label>
      <input type="text" value={value} onChange={handleChange} />
      <p>当前值: {value}</p>
    </div>
  );
}

export default ItemInput;

// ParentComponent.jsx
import React from 'react';
import ItemInput from './ItemInput'; // 导入子组件

function ParentComponent() {
  const userInputsData = ['hoge', '123', 'aaa']; // 初始输入项的标识符

  return (
    <div>
      <h2>多项独立输入</h2>
      {userInputsData.map((data) => (
        // 遍历数据数组，为每个数据项渲染一个独立的ItemInput组件
        // 每个ItemInput组件都有其自己的状态
        <ItemInput key={data} label={data} initialValue="" />
      ))}
    </div>
  );
}

export default ParentComponent;