如何在React中循环新的输入框渲染器并获取数组中的值？

import React, { useState } from 'react';

function InputList() {
  // 初始化状态为一个空数组
  const [inputValues, setInputValues] = useState([]);

  // 处理输入框值的变化
  const handleInputChange = (event, index) => {
    // 创建一个新的数组副本
    const newInputValues = [...inputValues];
    // 更新对应索引的值
    newInputValues[index] = event.target.value;
    // 设置新的状态
    setInputValues(newInputValues);
  };

  // 添加新的输入框
  const addInput = () => {
    setInputValues([...inputValues, '']);
  };

  // 获取数组中的值
  const getValues = () => {
    console.log(inputValues);
  };

  return (
    <div>
      {inputValues.map((value, index) => (
        <input
          key={index}
          type="text"
          value={value}
          onChange={(event) => handleInputChange(event, index)}
        />
      ))}
      <button onClick={addInput}>添加输入框</button>
      <button onClick={getValues}>获取值</button>
    </div>
  );
}

export default InputList;