reactjs - 为什么未定义 useState 值?
问题描述
我有一个反应应用程序。我最近添加了一个 POST 功能。当我通过 useContext 将它连接到前端时,我收到以下错误消息:
src/components/messages/SendMessage.js 第 57:16 行:'senderName' 未定义 no-undef 第 66:16 行:'senderEmail' 未定义 no-undef 第 75:16 行:'senderCompanyName' 未定义 no- undef Line 84:16: 'message' is not defined no-undef 搜索关键字以了解有关每个错误的更多信息。
未定义的元素是我连接到组件的默认状态。它应该获取输入数据,然后通过 Fetch 发布到数据库。我无法弄清楚发生了什么。在逻辑位于单独的状态文件之前,我曾经收到上下文文件未定义的错误消息,所以我将所有逻辑代码移动到组件文件,现在错误消息变得更加具体,并说这些特定元素是不明确的。但是怎么做?下面是代码:
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”连接到组件,但它似乎不起作用。
解决方案
你可以试试下面的而不是 {senderName} 试试 {newMessage.senderName} 吗?
推荐阅读
- java - 我的应用程序运行良好,但现在它不断崩溃
- linkedin - 广告报告 API 的速率限制
- perl - 如何提取可能包含数字的字符串中尖括号括起来的数字
- jquery - jQuery根据'td'内'sub-div'中的内容对表格列进行排序
- spring-boot - 如何在不安装docker和部署在centos的情况下将spring boot应用容器化
- r - 如何根据可变行数创建具有移动平均值的新列?
- loopback4 - 如何在环回 4 中添加包含过滤器
- php - PHP仅在服务器重新启动后挂起
- reactjs - React Hooks - 当我在另一个选择上选择一个选项时更改选择选项
- python - 我要绘制的值未显示在图中