在下面，我已經驗證了 setNewItem 可以作業，但是專案沒有得到更新，所以函式 handleSubmit 一定有問題。這里出了什么問題？
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
uj5u.com熱心網友回復：
試試這個??
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>
);
}
uj5u.com熱心網友回復：
你需要改變并嘗試這個。
const handleSubmit = (event) => {
event.preventDefault();
setItems([ newItem, ...items]);
};
...
...
...
<input type="submit"
value="submit"
onSubmit={event => handleSubmit(event)}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/464309.html