React.js中带分页的实时搜索

Question

我想在所有页面中搜索，但我的代码只在当前页面中搜索
例如，当我在第2/5页键入本页中的游客姓名时，它会向我显示数据，
但当我键入第4/5页中的旅游者时，它不会向我显示任何信息
我在后台使用Laravel
这是后端代码：

$tourists = Tourist::where('hotel_id', $request->hotel_id)->orderBy('created_at', 'DESC')->paginate(10);
return $toursits;

前端代码：

this.state = {
activePage: 1,
tourists: []
}
async componentDidMount() {
await this.getTourists();
}
async getTourists() {
let response = await callApi('tourists/paginate', { page: this.state.activePage, hotel_id: this.context.hotel_id[0] });
this.setState({ tourists: response.data, perPage: response.meta.per_page, total: response.meta.total, lastPage: response.meta.last_page });
}

渲染方法：

{this.state.tourists
.filter(x => new RegExp (this.state.first_name, 'i').test(x.first_name)
.map((tourist, i) =>
<tr>
<td>{tourist.first_name}</td>
</tr>)}

Answer 1

您从后端获得了一个分页的结果列表，但您在前端实现了搜索功能。

当你第一次进入你的页面时，你会从服务器上得到前10个结果。当时，您的React应用程序不知道还有更多的结果需要解析，只能"看到"您从服务器发送的10个分页结果。通过过滤这些结果，您将无法获得任何其他最初不是由服务器发送的结果。

您有两个解决方案：

1. 实现分页客户端
2. 在服务器端实现搜索功能

鉴于您已经在服务器上实现了分页，我认为您有很多结果，并且一次发送所有结果是不可行的。

这给我们留下了选项n°2。添加到您的代码示例中，您可以执行以下操作：

$tourists = Tourist::where('hotel_id', $request->hotel_id)
// Add this to filter results by first_name
->where('first_name', 'like', "%{$request->first_name}%"))
->orderBy('created_at', 'DESC')->paginate(10);
return $tourists;