从 ReactJS 前端到 NodeJS 后端获取数据的正确方法是什么？答案

【问题标题】：What's the right way to get data from ReactJS front-end to NodeJS back-end?从 ReactJS 前端到 NodeJS 后端获取数据的正确方法是什么？
【发布时间】：2021-12-21 11:53:38
【问题描述】：

如何以这种方式正确组织 ReactJS 代码，点击处理程序从客户端发送数据到后端（当前 URL 和字段“body”中的输入值) (Twilio 模块) ? 前端：

<form>
    <input type="text"/>
    <button onClick={handler}>Send</button>
</form>

后端：

const accountSid = "account-Sid";
const authToken = "auth-token";
const client = require("twilio")(accountSid, authToken);

const SendMessage = client.messages
  .create({
    body: "text_here",
    from: "whatsapp:+@recipient",
    to: "whatsapp:+@reciever",
  })
  .then((message) => console.log(message.sid))
  .done();

module.exports = {
  SendMessage,
};

前端伪代码：

import SendMessage from "../server/messageAPI/messageAPI";

const location = useLocation();
let value = "";

const handler = () => {
  SendMessage(location, value);
};
<form>
  <input type="text" value={value} />
  <button onClick={handler}>Send</button>
</form>;

【问题讨论】：

标签： node.js reactjs

【解决方案1】：

你的后端代码-：

const accountSid = "account-Sid";
const authToken = "auth-token";
const client = require("twilio")(accountSid, authToken);

const theNumberYouBoughtFromTwilio = "123457696";

const SendMessage = (message, to) =>
  client.messages
    .create({
      body: `${message}`,
      from: `whatsapp:+${theNumberYouBoughtFromTwilio}`,
      to: `whatsapp:+${to}`,
    })
    .then((message) => console.log(message.sid))
    .done();

module.exports = {
  SendMessage,
};

你的前端代码：-

import React, { useState } from "react";
import SendMessage from "../server/messageAPI/messageAPI";

const App = () => {
  const [message, setMessage] = useState("");

  const messageHandler = async (e) => {
    e.preventDefault();
    console.log(message);
    await SendMessage(location, message); // incase sendmesssage is async call which makes sense
  };

  return (
    <div>
      <form>
        <input onChange={(e) => setMessage(e.target.value)} value={message} />
        <button onClick={messageHandler}>Send</button>
      </form>
    </div>
  );
};

export default App;

【讨论】：

【解决方案2】：

我会做这样的事情

const SendMessageComponent = () => {
  const location = useLocation()
  const [message, setMessage] = useState("")
 
  const handleMessage = (event) => setMessage(event.target.value)
  const sendMessage = () => SendMessage(location, message)

  return (
    <>
      <input type="text" value={message} onChange={handleMessage} />
      <button onClick={sendMessage}>Send</button>
    </>
  )
}

【讨论】：