如何使用reactjs中的输入将数据添加到数组中？

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState(''); // 输入框的值
  const [data, setData] = useState([]); // 数组数据

  const handleInputChange = (e) => {
    setInputValue(e.target.value); // 更新输入框的值
  };

  const handleAddData = () => {
    setData([...data, inputValue]); // 将输入框的值添加到数组中
    setInputValue(''); // 清空输入框
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleAddData}>添加</button>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;