1

我正在使用材料表和 React 使用远程数据。在没有找到搜索结果的情况下，我试图弄清楚如何删除微调器的显示并显示“没有要显示的记录”。搜索在搜索字段中的每次击键后执行 Web 服务调用。我想我想要的是设置一个 timeOut 来停止微调器，但我确定在下面的代码中添加它的位置并且在语法上有点困惑。

render() {
    return (
        <MaterialTable
            icons={tableIcons}
            title="Remote Data Preview"
            columns={[
                { title: 'Publication ID', field: 'publicationId' },
                { title: 'PMID', field: 'pmid' },
                { title: 'First author', field: 'firstAuthor' },
                { title: 'Publication', field: 'title' },
                { title: 'Journal', field: 'journal' },
                { title: 'Status', field: 'status' },
            ]}
            data={query =>
                new Promise((resolve, reject) => {
                    let url = GET_PUBLICATIONS_URL

                    if (query.search) {
                        url += query.search + '?pmid=true'

                        fetch(url)
                            .then(response => response.json())
                            .then(result => {
                                resolve({
                                    data: [result],
                                    page: 0,
                                    totalCount: 1,
                                })
                            }).catch(error => {
                            })
                    }
                    else {
                        console.log("** No PMID added...")
                        url += '?size=' + query.pageSize
                        url += '&page=' + (query.page)

                        fetch(url)
                            .then(response => response.json())
                            .then(result => {
                                resolve({
                                    data: result._embedded.publications,
                                    page: result.page.number,
                                    totalCount: result.page.totalElements,
                                })
                                console.log("** Data: ", result._embedded.publications);
                            }).catch(error => {
                                 setTimeout(resolve, 1000)
                                 return Promise.reject(error);
                            })
                    }
                })
            }
            options={{
                search: true
            }}
        />
    )
}

当使用上述代码没有返回搜索结果时，控制台显示：

未捕获（承诺中） SyntaxError：JSON 中位于位置 0 material-table.js:249 的意外标记 U 未捕获（承诺中）类型错误：无法读取未定义的属性“totalCount”

4

1 回答 1

1

如果我们考虑：从data表的属性中提取 Fetching Data 到一个标准方法，在 处调用它componentDidMount并删除承诺，因为那里不需要它，让我们看看这是否能解决问题：

componentDidMount(){
  this.getTableData();
}

getTableData = query => {
    let url = GET_PUBLICATIONS_URL;
    if (query.search) {
      url += query.search + '?pmid=true';

      fetch(url)
        .then(response => response.json())
        .then(result => {
          this.setState({
            tableData: {
              data: [result],
              page: 0,
              totalCount: 1,
            }
          })
        })
        .catch(error => {
          this.setState({
            error: {
              id: 2,
              error: error.message
            }
          })
        })
    } else {
      url += '?size=' + query.pageSize;
      url += '&page=' + (query.page);
      fetch(url)
        .then(response => response.json())
        .then(result => {
          this.setState({
            tableData: result._embedded.publications,
            page: result.page.number,
            totalCount: result.page.totalElements,
          })
        })
        .catch(error => {
          this.setState({
            error: {
              id: 2,
              error: error.message
            }
          })
        })
    }
}

render() {
  const { state: { tableData } } = this;

  return (
    <MaterialTable
      icons={tableIcons}
      title="Remote Data Preview"
      columns={[
          { title: 'Publication ID', field: 'publicationId' },
          { title: 'PMID', field: 'pmid' },
          { title: 'First author', field: 'firstAuthor' },
          { title: 'Publication', field: 'title' },
          { title: 'Journal', field: 'journal' },
          { title: 'Status', field: 'status' },
      ]}
      data={tableData.data}
      options={{search: true}}
    />
  )
}
于 2019-07-25T11:55:03.417 回答