修复 React Material-table 显示远程数据的问题答案

【问题标题】：Fix Issue with React Material-table to Display Remote Data修复 React Material-table 显示远程数据的问题
【发布时间】：2020-05-03 14:37:54
【问题描述】：

我有一个作为数组对象发送的远程数据。我将其转换为 JSON 数组，以便在材料数据表中显示此数据。我可以调用 API，当我记录响应时，我可以看到转换后的 JSON 数据如下：

[{"xxxx":"xxxx","yyyy":5,"zzzz":3,"tttt":1,"qqqqq":"some-data"}]

不幸的是，我无法在表格中显示这些数据，同时也实现了分页。请在下面找到我的代码并帮助我解决此问题：

data={query =>
          new Promise((resolve, reject) => {
            let formData = new FormData();
            const userid = 'someID'

            formData.append('userid', userid);
            const config = {
              headers: { 'content-type': 'multipart/form-data' },
            };

            let url = 'http://urlendpoint?'
            url += 'per_page=' + query.pageSize
            url += '&page=' + (query.page + 1)
            fetch(url, {
              method: 'POST',
              body: formData,
              config
            })
              .then(response => response.json())
              .catch((error) => {
                console.log(error.response);
              })
              .then(result => {
                let resultData = JSON.stringify(result);
                console.log('result: ' + resultData);
                resolve({
                  data: resultData,
                  page: resultData.page - 1,
                  totalCount: resultData.total,
                })
              })
          })
        }

另外，我正在按照这个链接来实现材料表：https://material-table.com/#/docs/features/remote-data

【问题讨论】：

材料表使用哪个组件。如果可能，请为其添加链接
@ShubhamKhatri 这是我关注的链接material-table.com/#/docs/features/remote-data
我认为您实际上是在将resultData 传递给表格而不是使用resultData.data，这是一个问题。更改为 resolve({ data: resultData.data, page: resultData.page - 1, totalCount: resultData.total, }) 将起作用，假设您输出提供数据作为键
@ShubhamKhatri 这是我作为数组对象收到的数据 [{"xxxx":"xxxx","yyyy":5,"zzzz":3,"tttt":1,"qqqqq ":"some-data"}] 并将其转换为 JSON。所以我的 JSON 不提供数据作为键。
好的，但是你尝试使用我认为不会出现的 resultData.total 和 resultData.page 。你也可以将你的 resultData 字符串化，这是表格不想要的

标签： javascript json reactjs es6-promise material-table

【解决方案1】：

我实际上删除了对 JSON 字符串的转换，一切正常。请参阅下面的更新代码：

data={query =>
  new Promise((resolve, reject) => {
    let formData = new FormData();
    const userid = 'someID'

    formData.append('userid', userid);
    const config = {
      headers: { 'content-type': 'multipart/form-data' },
    };

    let url = 'http://urlendpoint?'
    url += 'per_page=' + query.pageSize
    url += '&page=' + (query.page + 1)
    fetch(url, {
      method: 'POST',
      body: formData,
      config
    })
      .then(response => response.json())
      .catch((error) => {
        console.log(error.response);
      })
      .then(result => {
            resolve({
              data: result,
              page: result.page - 1,
              totalCount: result.total,
            })
          })
  })
}

【讨论】：