为什么未定义 useState 值？

Question

我有一个反应应用程序。我最近添加了一个 POST 功能。当我通过 useContext 将它连接到前端时，我收到以下错误消息：

src/components/messages/SendMessage.js 第 57:16 行：'senderName' 未定义 no-undef 第 66:16 行：'senderEmail' 未定义 no-undef 第 75:16 行：'senderCompanyName' 未定义 no-undef 第 84:16 行：“消息”未定义 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”连接到组件，但它似乎不起作用。

Answer 1

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