在表单中使用useState更新数组

Question

在下面，我已经验证了setNewItem工作，但是项目没有得到更新，所以一定有一个问题与函数handlessubmit。这里出了什么问题?

import "./styles.css";
import React, {useState, useEffect} from 'react';

export default function App() {
  const [items, setItems] = useState(['first item']);
  const [newItem, setNewItem] = useState("");
  
  const handleSubmit = (event, newItem, items) => {
    event.preventDefault();
    setItems([ newItem, ...items]);
  };
  const handleChange = (event) => {
    setNewItem(event.target.value);
  }
  
  return (
    <div>
      <form>
        <input type="text" 
               value={newItem} 
               onChange={handleChange}
              />
        <input type="submit" 
               value="submit"
               onSubmit={handleSubmit}
               />
      </form> 
    <ul>
      {items.map( (i) => {
        return(<li>{i}</li>)
      })}
    </ul> 
    </div>
  );
}

https://codesandbox.io/s/new?file=/src/App.js: 0 - 797

Answer 1

试试这个👇

import "./styles.css";
import React, { useState, useEffect } from "react";
export default function App() {
  const [items, setItems] = useState(["first item"]);
  const [newItem, setNewItem] = useState("");
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("here");
    setItems([newItem, ...items]);
  };
  const handleChange = (event) => {
    setNewItem(event.target.value);
  };
  return (
    <div>
      <form>
        <input type="text" value={newItem} onChange={handleChange} />
        <input type="button" value="submit" onClick={handleSubmit} />
      </form>
      <ul>
        {items.map((i) => {
          return <li>{i}</li>;
        })}
      </ul>
    </div>
  );
}

Answer 2

您需要更改并尝试这个

  const handleSubmit = (event) => {
    event.preventDefault();
    setItems([ newItem, ...items]);
  };
 ...
 ...
 ...
 <input type="submit" 
      value="submit"
      onSubmit={event => handleSubmit(event)}
 />