为什么未定义 useState 值？

Question

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

src/components/messages/SendMessage.js Line 57:16: 'senderName' is not defined no-undef Line 66:16: 'senderEmail' is not defined no-undef Line 75:16: 'senderCompanyName' is not defined no-undef Line 84:16: 'message' is not defined no-undef Search for the keywords to learn more about each error.

未定义的元素是我连接到组件的默认状态。它应该获取输入数据，然后通过 Fetch post 到数据库。我不知道发生了什么事。在逻辑在一个单独的状态文件中之前，我曾经得到上下文文件未定义的错误消息，所以我将所有逻辑代码移到了组件文件中，现在错误消息变得更加具体，并说这些特定元素是不明确的。但是怎么办？下面是代码：

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} 吗？

为什么未定义 useState 值？

Why are the useState values not defined?

reactjs

undefined

use-state

react-state-management