如何在反应中将项目添加到数组答案

【问题标题】：How to add items to array in react如何在反应中将项目添加到数组
【发布时间】：2022-12-03 00:24:50
【问题描述】：

代码：

export default function App() {
  const [name,setName] = useState("");
  var myArray = [];
  const handleAdd = () => {
    myArray = [...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>
  );
}

单击它不会将名称添加到数组中。

【问题讨论】：

标签： reactjs

【解决方案1】：

这就是您使用 useState“推送”到数组的方式

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

【讨论】：

【解决方案2】：

您应该为数组使用 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>
    );
}

【讨论】：

【解决方案3】：

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

编码愉快！

【讨论】：