onChange 在我的 React 应用程序中没有触发

Question

我正在尝试建立一个随机足球队选择器，我正在自己做数据库。

输入有问题

import React, { use, useRef, useState } from "react";
const fetchAll = async () => {
const getAll = await fetch("http://localhost:3000/api/getEquipos");
const data = await getAll.json();
return data;
};
const MyForm = () => {
const [newTeam, setNewTeam] = useState({
nombre: "",
logo: "",
liga: ""
})
const handleChange = (e) => {
setNewTeam({ [e.target.name]: e.target.value })
}
const data = use(fetchAll());
const handleSubmit = async (e) => {
e.preventDefault();
const lastId = await data.findLast((elem) => elem.id > 1);
try {
const addOne = await fetch("http://localhost:3000/api/addEquipos", {
method: "POST",
body: JSON.stringify({
nombre: newTeam.nombre,
logo: newTeam.logo,
liga: newTeam.liga,
id: lastId.id + 1,
}),
});
} catch (error) {
console.log(error);
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text"
placeholder="equipo"
name="nombre"
onChange={handleChange} />
<input type="text"
placeholder="logo"
name="logo"
onChange={handleChange} />
<input type="text"
placeholder="liga"
name="liga"
onChange={handleChange} />
<input type="submit" value="submit" />
</form>
</div>
);
};
export default MyForm;

这是一个简单的表单，用于发送字段到数据库

import dbConnect from "lib/dbConnect";
import { equipoModel } from "lib/models/equiposModel";
import { NextApiRequest, NextApiResponse } from "next";
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
await dbConnect();
try {
const body = JSON.parse(req.body);
console.log(body);
if (body.nombre === "") {
return;
} else {
await equipoModel.create({
nombre: body.nombre,
logo: body.logo,
liga: body.liga,
id: body.id
});
res.json({ added: true });
}
} catch (error) {
res.status(400).json(error);
}
}

和console.log(body) shows "{ nombre: '', logo: '', liga: '', id: 3 }"

我正试图将数据发送到我的数据库，它只显示空字符串。

Answer 1

看起来你保存团队的方式不对。

const handleChange = (e) => {
setNewTeam({ ...newTeam, [e.target.name]: e.target.value })
}

我推荐新的关于管理状态的beta文档https://beta.reactjs.org/learn/managing-state