Postman 与 App Script 配合良好，React 表单失败

Question

我正在尝试创建一个表单，将结果发送到 google sheets。

从网站发送后，我收到“响应 200 成功”，但 sheet 未更新。但是从邮递员那里没有问题。

反应：

  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (event) => {
    const formData = new FormData(event.currentTarget);
    event.preventDefault();
    var formObject = Object.fromEntries(formData.entries())
    console.log(formObject)

    const axios = require('axios')

    const data = {
      "organization": ['JD'],
      "role": ['DJ'],
      "twitter": ['aba'],
      "email": ['someemail@gmail.com'],
    }
    console.log(JSON.stringify(data))
    axios({
      method: 'post',
      url: googleForm,
      data: data,
      headers: {
        'Content-Type': 'text/plain;charset=utf-8',
      },
    }).then(function (response) {
      console.log("was this the response?", response);
    }).catch(function (error) {
      console.log(error);
    });
  };

应用程序脚本：


function doPost (e){
  if(!e) return ContentService.createTextOutput("No e");
  if(!e.parameters) return ContentService.createTextOutput("No params");
  if(!e.parameters.email) return ContentService.createTextOutput("No email");
  if(!e.parameters.twitter) return ContentService.createTextOutput("No twitter");
  if(!e.parameters.organization) return ContentService.createTextOutput("No organization");
  if(!e.parameters.role) return ContentService.createTextOutput("No role");

  return addToDoc(e.parameters);
}

function addToDoc(parameters) {
  // shortly after my original solution Google announced the LockService[1]
  // this prevents concurrent access overwritting data
  // we want a public lock, one that locks for all invocations
  var lock = LockService.getDocumentLock();
  lock.waitLock(30000);  // wait 30 seconds before conceding defeat.
  try {
    // next set where we write the data - you could write to multiple/alternate destinations
    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet = doc.getSheetByName(SHEET_NAME);
   
    var nextRow = sheet.getLastRow()+1; // get next row
    var row = [];
    // loop through the header columns
    row.push(parameters.organization);
    row.push(parameters.role);
    row.push(parameters.twitter);
    row.push(parameters.email);
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);

    // return json success results
    return ContentService.createTextOutput(JSON.stringify({"result":"success", "row": nextRow})).setMimeType(ContentService.MimeType.JSON);
  } catch(error){
    return ContentService.createTextOutput(JSON.stringify({"result":"error", "error": error})).setMimeType(ContentService.MimeType.JSON);
  } finally { //release lock
    lock.releaseLock();
  }
}

来自网站的请求响应： Website request

邮递员的回复：{"result":"success","row":6}

有什么解决办法吗？

Answer 1

你的情况，下面的修改怎么样？本次修改，修改doPost

修改后的脚本：

function doPost(e) {
  if (!e) return ContentService.createTextOutput("No e");
  var obj = JSON.parse(e.postData.contents);
  if (!obj.email) return ContentService.createTextOutput("No email");
  if (!obj.twitter) return ContentService.createTextOutput("No twitter");
  if (!obj.organization) return ContentService.createTextOutput("No organization");
  if (!obj.role) return ContentService.createTextOutput("No role");
  return addToDoc(obj);
}

当你的axios为运行时，data的值被放入e.postData.contents，而e.parameters为空。我认为这可能是您遇到问题的原因。

注：

在您的脚本中，似乎使用了 Web Apps。 在这种情况下，当您修改 Google Apps 脚本时，请将部署修改为新版本。这样，修改后的脚本就会反映在 Web Apps 中。请注意这一点。
您可以在“Redeploying Web Apps without Changing URL of Web Apps for new IDE”的报告中看到详细信息。

Postman 与 App Script 配合良好，React 表单失败

Postman works fine with App Script, React forms fail

javascript

post

google-sheets

google-apps-script

reactjs

修改后的脚本：

注：