为什么没有定义useState值?

Question

我有一个react应用程序。我最近添加了一个POST特性。当我通过useContext将其连接到前端时，我得到了以下错误消息:

src/组件/信息/SendMessage.js第57:16行:' sendname '没有定义no-undef66:16行:"senderEmail"不是no-undef定义第75:16行:' sendcompanyname '没有定义no-undef第84:16行:'message'没有定义- no-undef搜索关键字以了解有关每个错误的更多信息。

未定义元素是我连接到组件的默认状态。它应该获得输入数据，然后通过Fetch发布到数据库。我不知道发生了什么事。在逻辑位于单独的State文件中之前，我常常会得到Context文件未定义的错误消息，因此我将所有逻辑代码移到组件文件中，现在错误消息变得更加具体，并指出这些特定元素未定义。但如何?下面是代码:

import React, { useContext, useState } from "react";
import companyContext from "../../logic/companies/companyContext";
const SendMessage = ({ company }) => {
const myCompanyContext = useContext(companyContext);
const { convertToLink } = myCompanyContext;
// Set defaults
// add a message
const [newMessage, setNewMessage] = useState({
date: new Date(),
recieverID: company.id,
senderName: "",
senderEmail: "",
senderCompanyName: "",
message: ``,
});
// add message function
// CRUD functions
// add a message
const addMessage = async input => {
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(input),
};
const response = await fetch(
"http://localhost:5002/messages",
requestOptions
);
const data = await response.json();
setNewMessage(data);
};
// Event actions
// add message
const onChange = change =>
setNewMessage({ ...newMessage, [change.target.name]: change.target.value });
const onAddButton = submit => {
submit.preventDefault();
addMessage(newMessage);
};
return (
<form
className="center modal"
id={"message-#" + company.id + "-" + convertToLink(company.name)}
onSubmit={onAddButton}
>
<h4>Send message to {company.name}</h4>
<input
className="input"
type="text"
name="senderName"
value={senderName}
onChange={onChange}
placeholder="Your name"
required
/>
<input
className="input"
type="text"
name="senderEmail"
value={senderEmail}
onChange={onChange}
placeholder="Your email"
required
/>
<input
className="input"
type="text"
name="senderCompanyName"
value={senderCompanyName}
onChange={onChange}
placeholder="Your company's name (optional)"
/>
<textarea
className="input"
rows="10"
type="text"
name="message"
value={message}
onChange={onChange}
placeholder="Write your message here..."
required
></textarea>
<br />
<button className="button-cta" type="submit">
Send message
</button>
<a className="delete button" href="/#!">
close
</a>
</form>
);
};
export default SendMessage;

可以看到，未定义的"元素通过"onChange"连接到组件

Answer 1

你可以试试下面的{senderName}而不是{newMessage.senderName}吗?