Question

我正在将material-table与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处的意外令牌U material-table.js：249 未捕获（承诺）TypeError：无法读取未定义的属性“ totalCount”

Answer 1

如果考虑的话：从表的data属性提取数据到标准方法，在componentDidMount调用它并删除 promise ，因为它不是需要在那里，让我们看看这是否可以解决问题：

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}}
    />
  )
}

如何使用带有React和远程数据的物料表找不到搜索结果时的处理方式

1 个答案: