在使用 Hook (useState) 的 React 中，我如何像这种模式一样添加新行？

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 操作，如果不是很重要的话

在使用 Hook (useState) 的 React 中，我如何像这种模式一样添加新行？

In React Using Hook (useState) How i can add new row Like This Pattren?

javascript

reactjs

use-state