当搜索没有返回结果时，如何在 <MaterialTable> 上显示适当的响应？

Question

我在 React 中使用来自https://material-table.com/ 的表格 但我正在承诺进行数据搜索。如果搜索未返回任何结果，则该表将永远加载...我的想法是显示一些消息。我怎样才能以最佳方式做到这一点？

 <MaterialTable
    title="Documents"
    columns={cols}
    data={query =>
    new Promise((resolve, reject) => {
        let url = global.url_base+'service'
        fetch(url, {
            method: 'POST',
            body: JSON.stringify({
                        search: query.search,
                        pageSize: query.pageSize,
                        page: (query.page + 1),
                        id: sessionStorage.getItem('id')
            }),
            headers: {
                    "Content-type": "application/json; charset=UTF-8"
            }
            })
        .then(response => response.json())
        .then(result => {
            resolve({
            data: result.data,
            page: result.page - 1,
            totalCount: result.total,
            })
        })
    })
    }
/>

Answer 1

您应该在其他地方获取数据，例如。在 componentDidMount() 中，您将其设置为状态变量。然后，在您的 MaterialTable 中输入 data={(this.state.response) ? response : 'Your error message'}，或者，如果此表不使用字符串作为数据，则只需切换渲染整个 MaterialTable 和您的错误消息。