在React使用钩子(useState)我如何能添加新的行这样的模式?

Question

如何在使用状态下添加更多数组当我使用setAddtaskv数组将被添加，但格式不为真

import react,{useState,useEffect} from 'react'
const  App = () => {

const [addtaskV,setAddtaskv] = useState([
{ id: 1, title: "Alabama",text:"Test" },
{ id: 2, title: "Georgia",text:"Test" },
{ id: 3, title: "Tennessee",text:"Test" }
]);

const addTask = () =>
{
const title = document.getElementById('title').value;
const text = document.getElementById('text').value;
}

return (
<div>
<input type="text" placeholder="Title" id="title"/>
<input type="text" placeholder="Write some text" id="text" />
<button onClick={addTask}>Add</button>
</div>
);`enter code here`
}
export default App;

Answer 1

在你的addTask上你可以这样做

const addTask = () => {
const title = document.getElementById("title").value;
const text = document.getElementById("text").value;
setAddtaskv((previousState) => [
...previousState,
{ id: addtaskV.length + 1, title: title, text: text }
]);
};

...previousState上的spread意味着你得到里面已经有的东西，然后把你的新对象添加进去。

这是完整的组件

import react, { useState, useEffect } from "react";
const App = () => {
const [addtaskV, setAddtaskv] = useState([
{ id: 1, title: "Alabama", text: "Test" },
{ id: 2, title: "Georgia", text: "Test" },
{ id: 3, title: "Tennessee", text: "Test" }
]);
const addTask = () => {
const title = document.getElementById("title").value;
const text = document.getElementById("text").value;
setAddtaskv((previousState) => [
...previousState,
{ id: addtaskV.length + 1, title: title, text: text }
]);
};
return (
<>
<div>
<input type="text" placeholder="Title" id="title" />
<input type="text" placeholder="Write some text" id="text" />
<button onClick={addTask}>Add</button>
</div>
{addtaskV.map((task) => (
<div>
<span>
{task.id} - {task.title} - {task.text}
</span>
</div>
))}
</>
);
};
export default App;

编辑:我还建议你对如何正确开发React表单做一些研究。虽然您的解决方案有效，但还有更好的方法。但你似乎做得很好🤘

Answer 2

这是在React JS中进行此操作的通用且正确的方法

const [item, setItem] = useState({title: '', text: '', id: 0})
const [data, setData] = useState([])

// get inputs values
const handleInput = ({name, value}) => {
setItem({...item, [name]:value, id:data.length})
}
// new item object to `data`
const submit = () => {
if(item.title === '' || item.text === ''){
console.log('Please, fill empty spaces')
}else{
setData({...data, item})
}
}
<input value={item.title} name='title'
onChange={(e)=>handleInput(e.target)} />
<input value={item.text} name='text'
onChange={(e)=>handleInput(e.target)} />
<button onclick={()=>submit()}>Add new</button>
// render to screen
data && 
data.map(({title, text, id}) => <div key={id}>
<h1>{title}</h1>
<p>{text}</p>
</div>)

请不要在React中使用DOM操纵，如果不是至关重要的