React项目中useState定义的状态变量提示未定义问题求解

问题原因 #

你的所有表单字段状态都统一存放在newMessage状态对象中，没有单独声明senderName、senderEmail、senderCompanyName、message这几个独立变量，因此在JSX中直接引用这些变量名时，就会触发ESLint的未定义报错。

解决方案 #

将JSX中表单元素的value属性取值路径修改为从newMessage对象中读取即可，修正后的表单核心代码如下：

<input
  className="input"
  type="text"
  name="senderName"
  value={newMessage.senderName}
  onChange={onChange}
  placeholder="Your name"
  required
/>
<input
  className="input"
  type="text"
  name="senderEmail"
  value={newMessage.senderEmail}
  onChange={onChange}
  placeholder="Your email"
  required
/>
<input
  className="input"
  type="text"
  name="senderCompanyName"
  value={newMessage.senderCompanyName}
  onChange={onChange}
  placeholder="Your company's name (optional)"
/>
<textarea
  className="input"
  rows="10"
  type="text"
  name="message"
  value={newMessage.message}
  onChange={onChange}
  placeholder="Write your message here..."
  required
></textarea>

额外优化建议 #

你当前的提交逻辑中，请求完成后直接将接口返回的data赋值给newMessage，如果后端返回结构和初始表单结构不一致，会导致后续表单操作异常。建议提交成功后将表单重置为初始状态，可按如下方式调整代码：

// 抽离初始状态常量
const INITIAL_MESSAGE = {
  date: new Date(),
  recieverID: company.id,
  senderName: "",
  senderEmail: "",
  senderCompanyName: "",
  message: ``,
}

const SendMessage = ({ company }) => {
  const myCompanyContext = useContext(companyContext);
  const { convertToLink } = myCompanyContext;

  // 初始化状态
  const [newMessage, setNewMessage] = useState(INITIAL_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(INITIAL_MESSAGE);
  };
  // 其余逻辑保持不变
}

内容的提问来源于stack exchange，提问作者user16767975