ReactJS 尝试使用搜索输入过滤 ag 网格中的列

Question

我试图创建一个搜索输入框，使用 reactjs 过滤 ag 网格中的流派列。基本上 url 的端点有一个不同的端点，所以我不能在最后用 =${search} 查询它。因为流派的网址是http://url/library/books?genre=，如果有意义的话，我希望最初显示所有书籍。我完全不知道该怎么做，所以任何能推动我朝着正确方向前进的帮助都将不胜感激/链接到有帮助的东西或任何东西。目前以下代码将为我提供我想要的所有信息，但我只需要添加一个搜索输入来过滤：

function App () {
  const [rowData, setRowData] = useState([]);
  const [search, setSearch] =useState ("");
  const url = "http://url/library/books";
 const columns = [ 
      {headerName: "Title", field: "title"},
      {headerName: "Author", field: "author"},
      {headerName: "Genre", field: "genre", sortable: true},
  ];

    useEffect(() => {
      fetch(url)
      .then(res => res.json())
      .then(json => json.map(res => {
        return{
        title: res.title,
        author: res.author,
        genre: res.genre,
    };
  })
      ).then(res => setRowData(res));
},[]);

return (
<SearchFilter onSubmit ={setSearch} />
<AgGridReact
        columnDefs={columns}
        rowData={rowData}
        pagination={true}
        paginationPageSize={20}/>
}

Answer 1

根据您是否先获取所有书籍，有两种方法可以解决此问题。

---

获取所有书籍并在本地过滤

当您获取所有书籍时，您可以像这样过滤本地书籍列表：

书籍以数组形式存储。目前，您将它们传递给 AgGridReact 组件，如下所示：

<AgGridReact
  rowData={rowData} // books array
  // other props...
}

无论你传递给rowData 属性的数组是什么，都会被渲染。要仅渲染书籍的子集，您只需使用数组的 filter 函数传递书籍的子集而不是所有书籍：

<AgGridReact
rowData={rowData.filter(b => b.genre === "fantasy")}
  // other props...
}

现在只有genre 等于fantasy 的书才会被传递给AgGridReact。

显然您想使用search 过滤键的值，而不是固定字符串“fantasy”。

rowData={rowData.filter(b => b.genre === search)}

但是这里有一个错误。当search 的值为空字符串时，只会看到类型为空的书籍，但我们希望在这种情况下显示所有书籍。

如果有的话，你可以只使用search 字符串来纠正它：

rowData={search ? rowData.filter(b => b.genre === search) : rowData}

现在书籍将根据用户输入的流派进行过滤。

---

调用流派端点

要在过滤器更改时发出 API 请求，您只需将 useEffect 更改为在有新过滤器时运行的效果：

// where urlWithgenre === "http://url/library/books?genre="
useEffect(() => {
  fetch(`${urlWithGenre}${search}`)
    .then((res) => res.json())
    .then((json) =>
      json.map((res) => ({
        title: res.title,
        author: res.author,
        genre: res.genre,
      }))
    )
    .then((res) => setRowData(res))
}, [search]) // Notice that we add search variable to the dependency array

随着search 变量被添加到依赖数组中，这个效果将在搜索值改变时运行。此效果还将在组件挂载上运行一次，结果将获取所有书籍。

这里有一个错误，当search 设置为空字符串'' 时，我们想要获取所有书籍，而不是特定类型的书籍。

你可以像这样改变效果：

useEffect(() => {
  fetch(search ? `${urlWithGenre}${search}` : url)
  // rest of effect...

如果搜索字符串为空，这将获取所有书籍。

---

显然这不是一种非常有效的数据处理方式。

例如，如果你搜索fiction，然后搜索horror，然后再搜索fiction，我们已经费尽心思去获取小说书籍，但在搜索恐怖书籍时将其删除.最好将我们获取的所有内容都存储在本地，以防用户多次搜索相同的内容。

最好将输入限制为 API 拥有的所有可能类型的下拉选择，这样您就无法搜索不会有任何结果的类型。