reactjs - 在 react.js 中使用 fetch 函数时出错（TypeError：无法读取未定义的属性“原型”）

Question

[错误信息][1][1]: https://i.stack.imgur.com/OwL5J.png 这是我正在使用的代码

import {
  response
} from "express";
import React from "react";


export default class Dynamicrows extends React.Component {

  state = {
    rows: [{}]
  };
  handleChange = idx => e => {
    const {
      name,
      value
    } = e.target;
    const rows = [...this.state.rows];
    const rowInfo = rows[idx];
    rowInfo[name] = value;
    this.setState({
      rows
    });
  };
  handleSubmit = (item) => {
    item.preventDefault();
    var self = this;
    // On submit of the form, send a POST request with the data to the server.
    fetch("https://sites.ey.com/sites/Testing9/_api/web/lists/getbytitle('Jerome')", {
        method: 'PATCH',
        body: JSON.stringify(response),
        headers: {
          "Accept": "application/json;odata=verbose",
          "Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Im5PbzNaRHJPRFhFSzFqS1doWHNsSFJfS1hFZyIsImtpZCI6Im5PbzNaRHJPRFhFSzFqS1doWHNsSFJfS1hFZyJ9.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvc2l0ZXMuZXkuY29tQDViOTczZjk5LTc3ZGYtNGJlYi1iMjdkLWFhMGM3MGI4NDgyYyIsImlzcyI6IjAwMDAwMDAxLTAwMDAtMDAwMC1jMDAwLTAwMDAwMDAwMDAwMEA1Yjk3M2Y5OS03N2RmLTRiZWItYjI3ZC1hYTBjNzBiODQ4MmMiLCJpYXQiOjE2MjM4NDAwNzYsIm5iZiI6MTYyMzg0MDA3NiwiZXhwIjoxNjIzOTI2Nzc2LCJpZGVudGl0eXByb3ZpZGVyIjoiMDAwMDAwMDEtMDAwMC0wMDAwLWMwMDAtMDAwMDAwMDAwMDAwQDViOTczZjk5LTc3ZGYtNGJlYi1iMjdkLWFhMGM3MGI4NDgyYyIsIm5hbWVpZCI6IjA3YmY3ZmZmLTk5ZGQtNDQ0ZS1hNDkwLThmMGZhNWY1M2NjN0A1Yjk3M2Y5OS03N2RmLTRiZWItYjI3ZC1hYTBjNzBiODQ4MmMiLCJvaWQiOiIxODBmZGVjNC1iYWU1LTRhMTktODBhZi04YzgzMDc4NjY1MGEiLCJzdWIiOiIxODBmZGVjNC1iYWU1LTRhMTktODBhZi04YzgzMDc4NjY1MGEiLCJ0cnVzdGVkZm9yZGVsZWdhdGlvbiI6ImZhbHNlIn0.ff6bNI93U0XgHxkZdXW25ZdeKQe6shmWpWisBxPDLLxOK5bOmgQY3EMMzDy-P9DUKK5Pg5uAwsxcSmYDGkz3R_Yx3SWEh4Ns7F0qADqWYEG1KGRAeCdzcrTKRVneLUcKSrYFyIJ5dB0RW4zXub1b5BvbBJrRuMhdgiPKbrfh5JfZvu8RM66tglXjpPrg8qkw7F3bdloH9X6pZWbBgMbq5c70sutJHcSoW6tdWHz8FnVJZQQAMjkAJFQO5iOQWPJTnofHaCtWhUqLuzPYpiKS_f-LZu7AODX60h7YGF7J4B4M4-9A4xBLv4ITti1zFqtH0CtwTxVhCBSaH9FXOHIyiA",
          "X-HTTP-Method": "PATCH",
          "If-Match": "*",
          "content-Type": "application/json;odata=verbose",

        },

        credentials: 'same-origin',


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

  handleAddRow = () => {
    const item = {
      __metadata: {
        'type': 'SP.Data.JeromeListItem'
      },
      Country: "",
      second: "",
      third: "",
      fourth: "",
      fifth: "",
      sixth: ""
    };
    this.setState({
      rows: [...this.state.rows, item]
    });
  };
  handleRemoveRow = () => {
    this.setState({
      rows: this.state.rows.slice(0, -1)
    });
  };
  handleRemoveSpecificRow = (idx) => () => {
    const rows = [...this.state.rows]
    rows.splice(idx, 1)
    this.setState({
      rows
    })
  }

  render() {
    return ( <
      div >
      <
      div className = "container" >
      <
      div className = "row clearfix" >
      <
      div className = "col-md-12 column" >
      <
      table className = "table table-bordered table-hover"
      id = "tab_logic" >
      <
      thead >
      <
      tr >
      <
      th className = "text-center" > # < /th> <
      th className = "text-center"
      rowSpan = {
        2
      } > Country supplied to ? < /th> <
      th className = "text-center"
      colSpan = {
        2
      } > Total weight supplied to ABI in metric tons

      <
      td className = "text-center" > in 2021 < /td> <
      td className = "text-center" > in 2020 < /td>

      <
      /th> <
      th className = "text-center"
      colSpan = {
        2
      } > % of recycle content used <
      th className = "text-center" > during 2021 < /th> <
      th className = "text-center" > during 2021 < /th> </th >
      <
      th className = "text-center" > Comments(
        if any) < /th> <
      th / >
      <
      /tr> <
      /thead> <
      tbody > {
        this.state.rows.map((_item, idx) => ( <
          tr id = "addr0"
          key = {
            idx
          } >
          <
          td > {
            idx
          } < /td> <
          td >
          <
          input type = "text"
          name = "Country"
          value = {
            this.state.rows[idx].Country
          }
          onChange = {
            this.handleChange(idx)
          }
          className = "form-control" /
          >
          <
          /td> <
          td >
          <
          input type = "text"
          name = "second"
          value = {
            this.state.rows[idx].second
          }
          onChange = {
            this.handleChange(idx)
          }
          className = "form-control" /
          >
          <
          /td> <
          td >
          <
          input type = "text"
          name = "third"
          value = {
            this.state.rows[idx].third
          }
          onChange = {
            this.handleChange(idx)
          }
          className = "form-control"
          readOnly / >
          <
          /td> <
          td >
          <
          input type = "text"
          name = "fourth"
          value = {
            this.state.rows[idx].fourth
          }
          onChange = {
            this.handleChange(idx)
          }
          className = "form-control" /
          >
          <
          /td> <
          td >
          <
          input type = "text"
          name = "fifth"
          value = {
            this.state.rows[idx].fifth
          }
          onChange = {
            this.handleChange(idx)
          }
          className = "form-control"
          readOnly / >
          <
          /td> <
          td >
          <
          input type = "text"
          name = "sixth"
          value = {
            this.state.rows[idx].sixth
          }
          onChange = {
            this.handleChange(idx)
          }
          className = "form-control" /
          >
          <
          /td> <
          td >
          <
          button className = "btn btn-outline-danger btn-sm"
          onClick = {
            this.handleRemoveSpecificRow(idx)
          } >
          Remove <
          /button> <
          /td> <
          /tr>
        ))
      } <
      /tbody> <
      /table> <
      button onClick = {
        this.handleAddRow
      }
      className = "btn btn-primary" >
      Add Row <
      /button> <
      button onClick = {
        this.handleRemoveRow
      }
      className = "btn btn-danger float-right" >
      Delete Last Row <
      /button> <
      button onClick = {
        this.handleSubmit
      }
      className = "btn btn-danger float-right" >
      Submit <
      /button> <
      /div> <
      /div> <
      /div> <
      /div>
    );
  }
}

基本上，我使用 fetch 函数将数据保存到 SharePoint 列表中，但它没有保存并收到错误（在尝试读取条目的开头时，从 JSON 读取器读取了“EndOfInput”类型的节点。“StartObject” ' 节点是预期的）。当我在 fetch 函数的主体中添加响应时，它开始给我这个错误

标签： reactjssharepoint