ReactJS后期提取不工作，错误为：TypeError:未能提取_Reactjs_Fetch

ReactJS后期提取不工作，错误为：TypeError:未能提取

reactjs

ReactJS后期提取不工作，错误为：TypeError:未能提取,reactjs,fetch,Reactjs,Fetch,我正在尝试从reactjs应用程序向API发送一个POST fetch请求。我试过使用Postman，API也能正常工作，但是我的fetch没有，并且得到了我在标题中写的错误。请参见以下我的代码： function handleSubmit(event) { alert('A form was submitted: ' + vendorName); const proxyurl = "https://cors-anywhere.herokuapp.com/";

我正在尝试从reactjs应用程序向API发送一个POST fetch请求。我试过使用Postman，API也能正常工作，但是我的fetch没有，并且得到了我在标题中写的错误。请参见以下我的代码：

function handleSubmit(event) {
        alert('A form was submitted: ' + vendorName);
        const proxyurl = "https://cors-anywhere.herokuapp.com/";
        const url = "https://localhost:8080/api/newuser"; 
        console.log('lets roll')

        fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
              },
            // We convert the React state to JSON and send it as the POST body
            body: JSON.stringify({
               firstParam: vendorName
            })
        })
        // .then(res => res.json())



.then(function (response) {
            console.log(response)
            return response.json();

        }).catch((err) => {
            console.log(err)
        })

        event.preventDefault();
    }


    return (
        <div>
            <Navy vendorsdb={Vendorsdb} />
            <form onSubmit={handleSubmit}>
                <h2><a>Register your business</a></h2>
                <input onChange={event => setVendorName(event.target.value)} class="form-control" type="text" placeholder="enter business name" aria-label="Search"></input>
                <h1>{vendorName}</h1>
                <button type="submit">Submit</button>
            </form>
        </div>
    )
}

module.exports = function (app) {
  app.post("/api/newuser", function (req, res) {
    console.log("yes can post") //didn't log
    newVendorReceived = (req.body.newVendor);



    //add new route for new vendor in App.js


    var jsFile;
    fs.readFile('./src/App.js', "utf8", function (err, data) {
      if (err) throw err;
      jsFile = data;
      console.log(jsFile)
      var appArray = jsFile.split(" ");
      console.log("appArray ", appArray.length)


      //find marker and insert new route statement
      for (i = 0; i < appArray.length; i++) {
        if (appArray[i] === "<Marker") {
          appArray.splice(i, 1, `<Route exact path="/${newVendorReceived}" props="${newVendorReceived}" render={() => <Chat />} />\n <Marker`);
          newJsFileData = appArray.join(" ");
          stringyVersion = JSON.stringify(newJsFileData)

          console.log("appArray after join is ", newJsFileData)
          fs.writeFileSync('./src/App.js', newJsFileData, function (err) {

            if (err) {
              return console.log(err);
            }

            console.log("Success!");

          });
          break;
        }

      }
      //find marker and insert new import statement
      for (let i = 0; i < 2; i++) {
        // console.log("sc")
        // console.log(appArray[i])
        // console.log("count ", i);
        if (appArray[i] === "/*!*/") {
          // console.log("##############")

          // console.log("found importmarker!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! marker is ", appArray[i])
          appArray.splice(i, 1, `import ${newVendorReceived} from './${newVendorReceived}'; /*!*/`);
          var newJsFileData = appArray.join(" ");
          var stringyVersion = JSON.stringify(newJsFileData)
          console.log("appArray after join is ", newJsFileData)

          fs.writeFileSync('./src/App.js', newJsFileData, function (err) {

            if (err) {
              return console.log(err);
            }

            console.log("Success!");

          });

        }

      }

    });

函数handleSubmit（事件）{
警报（“已提交表单：”+vendorName）；
常量proxyurl=”https://cors-anywhere.herokuapp.com/";
常量url=”https://localhost:8080/api/newuser"; 
console.log（'let roll'）
获取（url{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
//我们将React状态转换为JSON，并将其作为POST主体发送
正文：JSON.stringify({
firstParam:vendorName
})
})
//.then（res=>res.json（））
.然后（功能（响应）{
console.log（响应）
返回response.json（）；
}).catch（（错误）=>{
console.log（错误）
})
event.preventDefault（）；
}
返回(
登记你的生意
setVendorName（event.target.value）}class=“form control”type=“text”placeholder=“enter business name”aria label=“Search”>
{vendorName}
提交
)
}

这是服务器端代码，它是一个用新路由更新js文件的API。它可以与Postman一起工作，但需要从我的ReactJS客户端进行fetch或axios调用够不着

module.exports = function (app) {
  app.post("/api/newuser", function (req, res) {
    console.log("yes can post") //didn't log
    newVendorReceived = (req.body.newVendor);



    //add new route for new vendor in App.js


    var jsFile;
    fs.readFile('./src/App.js', "utf8", function (err, data) {
      if (err) throw err;
      jsFile = data;
      console.log(jsFile)
      var appArray = jsFile.split(" ");
      console.log("appArray ", appArray.length)


      //find marker and insert new route statement
      for (i = 0; i < appArray.length; i++) {
        if (appArray[i] === "<Marker") {
          appArray.splice(i, 1, `<Route exact path="/${newVendorReceived}" props="${newVendorReceived}" render={() => <Chat />} />\n <Marker`);
          newJsFileData = appArray.join(" ");
          stringyVersion = JSON.stringify(newJsFileData)

          console.log("appArray after join is ", newJsFileData)
          fs.writeFileSync('./src/App.js', newJsFileData, function (err) {

            if (err) {
              return console.log(err);
            }

            console.log("Success!");

          });
          break;
        }

      }
      //find marker and insert new import statement
      for (let i = 0; i < 2; i++) {
        // console.log("sc")
        // console.log(appArray[i])
        // console.log("count ", i);
        if (appArray[i] === "/*!*/") {
          // console.log("##############")

          // console.log("found importmarker!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! marker is ", appArray[i])
          appArray.splice(i, 1, `import ${newVendorReceived} from './${newVendorReceived}'; /*!*/`);
          var newJsFileData = appArray.join(" ");
          var stringyVersion = JSON.stringify(newJsFileData)
          console.log("appArray after join is ", newJsFileData)

          fs.writeFileSync('./src/App.js', newJsFileData, function (err) {

            if (err) {
              return console.log(err);
            }

            console.log("Success!");

          });

        }

      }

    });

module.exports=函数（应用程序）{
app.post（“/api/newuser”），函数（req，res）{
console.log（“yes can post”）//未记录
newVendorReceived=（请求主体newVendor）；
//在App.js中为新供应商添加新路线
var-jsFile；
fs.readFile（'./src/App.js'，“utf8”，函数（err，data）{
如果（错误）抛出错误；
jsFile=数据；
log（jsFile）
var=jsFile.split（“”）；
console.log（“appArray”，appArray.length）
//查找标记并插入新路由语句
对于（i=0；iif（appArray[i]==“您能提供有关错误的更多详细信息吗？另外，您是否查看了网络选项卡以查看您得到的错误代码？我想知道它是否与某些授权问题有关CORS
我接着尝试了不同的方法：（async（）=>{const rawResponse=wait fetch（proxyurl+”，{method:'POST'，headers:{'Accept'：'application/json'，'Content Type'：'application/json'}，body:json.stringify（{newVendor:vendorName}）}）；const Content=wait rawResponse.json（）；console.log（content）；}）（）；你看过这个链接了吗？你能不能像Saif Masadeh提到的那样包括你的服务器代码，这很可能是一个跨源问题。你必须让你的服务器接受你的本地主机地址才能访问。例如：如果你获取不同的源资源，Safari有严格的限制。谢谢你的关注，我添加了API代码。您能提供有关错误的更多详细信息吗？另外，您是否查看了“网络”选项卡以查看得到的错误代码？我想知道它是否与某些授权问题有关CORS
我继续尝试不同的方法：（async（）=>{const rawResponse=wait fetch（proxyurl+“”，{method:'POST'，headers:{'Accept'：'application/json'，'Content Type'：'application/json'}，body:json.stringify（{newVendor:vendorName}）}）；const Content=wait rawResponse.json（）；console.log（content）；}）（）；你看过这个链接了吗？你能不能像Saif Masadeh提到的那样包括你的服务器代码，这很可能是一个跨源问题。你必须让你的服务器接受你的本地主机地址才能访问。例如：如果你获取不同的源资源，Safari有严格的限制。谢谢你的关注，我添加了API代码。