我嘗試使用鉤子呼叫請求帖子。首先，一個使用 this.setState 的呼叫請求發布并且它作業正常，但我想使用鉤子 (useState) 而不是 setState 并且它不起作用
下面的代碼作業正常
export default class AddShoes extends Component {
constructor(props) {
super(props);
this.state = this.startValue;
this.state.show = false;
this.shoesChange = this.shoesChange.bind(this);
}
startValue = {
brand: "",
model: "",
date: "",
price: "",
img: "",
};
shoesChange = (event) => {
this.setState({
[event.target.name]: event.target.value,
});
};
submitShoes = (event) => {
event.preventDefault();
const shoes = {
brand: this.state.brand,
model: this.state.model,
date: this.state.date,
price: this.state.price,
img: this.state.img,
};
axios.post("http://localhost:8080/api", shoes).then((response) => {
if (response.data != null) {
this.setState(this.startValue);
alert("added")
}
});
};
下面的第二個代碼不起作用
export default function AddShoes() {
const [values, setValues] = useState({
brand: "",
model: "",
date: "",
price: "",
img: "",
});
// const [show, setShow] = useState(false);
const handleSetInputs = (e) => {
setValues({ ...values, [e.target.name]: e.target.value });
};
const submitShoes = (event) => {
event.preventDefault();
axios.post("http://localhost:8080/api", values)
.then((response) => {
if (response.data != null) {
setValues(response.data);
alert("added!");
}
});
};
我應該改變什么？
uj5u.com熱心網友回復：
要僅更改 React Hooks 中狀態物件的一個??屬性，您必須執行以下操作：
setValues(prevValues => ({ ...prevValues, [e.target.name]: e.target.value }));
uj5u.com熱心網友回復：
在第一個有效的示例中，您通過呼叫重置狀態 this.setState(this.startValue)
在第二個示例中，您將網路請求的結果傳遞給 setValue setValues(response.data)
initialValues在AddShoes函陣列件之外創建。
const initialValues = {
brand: "",
model: "",
date: "",
price: "",
img: "",
}
現在把它傳到setValues里面submitShoes
const submitShoes = (event) => {
event.preventDefault();
axios.post("http://localhost:8080/api", values)
.then((response) => {
if (response.data != null) {
setValues(initialValues);
alert("added!");
}
});
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/330757.html