这就是使用useState“推”到数组方法

const [array, setArray] = useState([])
setArray(previous => [...previuous, newItem])

您应该为数组使用state，并设置该state以查看反映的更改：

export default function App() {
    const [name, setName] = useState('');
    const [myArray, setMyArray] = useState([]);
    const handleAdd = () => {
        setMyArray([...myArray, name]);
        setName('');
    };
    return (
        <div className="App">
            <input
                placeholder="type a name"
                onChange={(e) => setName(e.target.value)}
            />
            <button onClick={handleAdd}>add</button>
            <button onClick={() => console.log(myArray)}>test</button>
            {myArray.map((n) => {
                return <h2>{n}</h2>;
            })}
        </div>
    );
}

我们还可以将“myArr”的状态初始设置为空数组，这样更容易操作该数组的后续状态。onClick事件处理程序不会触发handleAdd函数，出于某种原因，它只会重置表单，而不会提供任何状态。要提交表单并具体化状态，我们还可以使用onSubmit事件处理程序来代替onClick。最后，我们可以使用“name”状态作为name输入的值/属性，它将由onChange处理程序使用。

import React, { useState } from 'react'

const App = () => {
const [name, setName] = useState('')
const [myArr, setMyArr] = useState([])

const submit = (event) => {
  event.preventDefault()
  setMyArr(myArr.concat(name))
  setName('')
}

//console.log(myArr)
return (
  <div className="App">
    <form onSubmit={submit}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          placeholder="type a name"
          type="text"
          value={name}
          onChange={({ target }) => setName(target.value)}
        />
      </div>
      <div>
        <button type="submit">Add</button>
      </div>
    </form>
    <div>
      {myArr.map((arr, index) => (
        <div key={index}>
          <p>{arr}</p>
        </div>
      ))}
    </div>
   </div>
  )
 }

export default App

快乐编码！