在提交表单时将 object 添加到数组中

Question

我是新来的反应，我只是在玩一些代码来熟悉它。

我将数据存储到一个对象数组中，就好像我是从基于 JSON 的 API 中引入它一样。我正在使用状态，因此我可以删除或添加任何项目到数据中。

我已经成功地从对象数组中删除了一个元素。 要添加到列表中，我正在使用一个表单。 我在 Form.js 中设置了表单。

表单.js

import { useState } from "react";

function Form() {
    const [name, setName] = useState("");
    const [job, setJob] = useState("");

    const submitForm = (e, {handleSubmit}) => {
        e.preventDefault();
        const newChar = {
            name: e.target.name.value,
            job: e.target.job.value
        }
        handleSubmit(newChar);
        setName('');
        setJob('');
    }

    return (
    <form onSubmit={submitForm}>
      <label htmlFor="name">Name</label>
      <input
        type="text"
        name="name"
        id="name"
        value={name}
        onChange={(e) => setName(e.target.value)} />
      <label htmlFor="job">Job</label>
      <input
        type="text"
        name="job"
        id="job"
        value={job}
        onChange={(e) => setJob(e.target.value)} />
      <input type="submit"/>  
    </form>
  );
}

export default Form;

在 App.js 中，我已经初始化了我的对象数组，并且我有我的 function handleSubmit()，它将通过采用现有的 state 并使用 ES6 扩展运算符添加新的字符参数来更新 state。

import { useState } from "react";
import Form from "./Form";

function App() {
    const [characters, setCharacters] = useState([
      {
        name: 'Charlie',
        job: 'Janitor',
      },
      {
        name: 'Mac',
        job: 'Bouncer',
      },
      {
        name: 'Dee',
        job: 'Aspring actress',
      },
      {
        name: 'Dennis',
        job: 'Bartender',
      },
    ]);
  
    const removeChar = (id) => {
      const newChars = characters.filter(character => characters.indexOf(character) !== id);
      setCharacters(newChars);
    }

    const handleSubmit = (character) => {
      setCharacters([ ...characters, character ]);
      
    }

  return (
    <div className="container">
      <Table characters = {characters} removeChar = {removeChar} />
      <Form handleSubmit = {handleSubmit} />
    </div>
  );
}

export default App;

此代码不起作用。 我似乎无法弄清楚为什么。 任何帮助将不胜感激

Answer 1

试试这个

 const handleSubmit = (character) => {
      let oldArray  = [...characters]
      oldArray.push(character)
      setCharacters(oldArray);          
    }

检查这个例子

 characters = [ { name: 'Charlie', job: 'Janitor', }, { name: 'Mac', job: 'Bouncer', }, { name: 'Dee', job: 'Aspring actress', }, { name: 'Dennis', job: 'Bartender', }, ] const handleSubmit = (character) => { let oldArray = [...characters] oldArray.push(character) console.log(oldArray) //setCharacters([...characters, character ]); } handleSubmit({name:'Waleed',Job:"HOD"})

Answer 2

所以我找到了问题所在。 我在 const SubmitForm 声明中传递 {handleSubmit} 而不是将它传递给 const Form()。 这是代码，如果它可以帮助任何新手做出反应。

表单.js

import { useState } from "react";

function Form({handleSubmit}) {
    const [name, setName] = useState("");
    const [job, setJob] = useState("");
  
    const submitForm = (e) => {
        
        e.preventDefault();
        const newChar = {
             name: e.target.name.value,
             job: e.target.job.value
        }
        handleSubmit(newChar);
        setName('');
        setJob('');
    }

    return (
    <form onSubmit={submitForm}>
      <label htmlFor="name">Name</label>
      <input
        type="text"
        name="name"
        id="name"
        value={name}
        onChange={(e) => setName(e.target.value)} />
      <label htmlFor="job">Job</label>
      <input
        type="text"
        name="job"
        id="job"
        value={job}
        onChange={(e) => setJob(e.target.value)} />
      <input type="submit"/>  
    </form>
  );
}

export default Form;

应用程序.js

import { useState } from "react";
import Form from "./Form";

function App() {
    const [characters, setCharacters] = useState([
      {
        name: 'Charlie',
        job: 'Janitor',
      },
      {
        name: 'Mac',
        job: 'Bouncer',
      },
      {
        name: 'Dee',
        job: 'Aspring actress',
      },
      {
        name: 'Dennis',
        job: 'Bartender',
      },
    ]);
  
    const handleSubmit = (character) => {
      setCharacters(characters => [...characters, character])
    }
    
  return (
    <div className="container">
      <Form handleSubmit = {handleSubmit} />
    </div>
  );
}

export default App;