React Hooks最佳实践：动态组件状态管理的组件化方案

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

function MyComponent() {
  const userInputs = ['hoge', '123', 'aaa'];

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

  return (
    <div>
      {/* ... */}
    </div>
  );
}

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

function DynamicInput({ initialValue, label, onValueChange }) {
  const [inputValue, setInputValue] = useState(initialValue);

  const handleChange = (event) => {
    const newValue = event.target.value;
    setInputValue(newValue);
    // 如果需要将子组件的状态变化通知给父组件，可以通过回调函数实现
    if (onValueChange) {
      onValueChange(newValue);
    }
  };

  return (
    <div>
      <label>{label}: </label>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        style={{ margin: '5px', padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}
      />
      <p>当前值: {inputValue}</p>
    </div>
  );
}

export default DynamicInput;

// app/page.js 或 父组件文件
'use client';
import React, { useState } from 'react';
import DynamicInput from '../components/DynamicInput'; // 确保路径正确

function ParentComponent() {
  const initialUserInputs = ['hoge', '123', 'aaa'];
  // 如果父组件需要收集所有子组件的状态，可以维护一个数组状态
  const [allInputValues, setAllInputValues] = useState(initialUserInputs);

  // 当子组件的值发生变化时，更新父组件中的对应状态
  const handleChildValueChange = (index, newValue) => {
    setAllInputValues(prevValues => {
      const newValues = [...prevValues];
      newValues[index] = newValue;
      return newValues;
    });
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>动态输入框示例</h1>
      {initialUserInputs.map((initialValue, index) => (
        <DynamicInput
          key={index} // key 是列表渲染中必不可少的，用于React识别列表项
          initialValue={initialValue}
          label={`输入项 ${index + 1}`}
          onValueChange={(newValue) => handleChildValueChange(index, newValue)}
        />
      ))}
      <hr style={{ margin: '20px 0' }} />
      <h2>所有输入框的当前值 (父组件视角):</h2>
      <pre style={{ backgroundColor: '#f0f0f0', padding: '10px', borderRadius: '5px' }}>
        {JSON.stringify(allInputValues, null, 2)}
      </pre>
    </div>
  );
}

export default ParentComponent;