Javascript 桌面上的自定义排序和功能

我已经构建了一个自定义的表组件，但是在这里我没有使用公共状态来执行操作。因此，我只是在这里列出了我感到困惑的问题

我在“名称”列中搜索

do

，只会出现一个结果，但如果我单击“排序”，它将对整个数据进行排序，因此这里的问题是我应该使用公共变量进行筛选和排序，我应该如何做

也像排序有一个自定义功能一样，我应该如何操作它，像一个道具，以便搜索可以在一个自定义的方式，如排序

另外，我如何在单击“外部”时关闭搜索输入，然后清除并使其处于活动状态，以当前处于活动状态的为准

附加的

当没有结果时添加一个无数据容器，这是正确的方法吗？如何使其正确

如何使用钩子以更干净的方式重构代码

这是我认为需要更改的主要部分

useEffect(() => {
    const currentSortedData = sortData(tableData, sortings);
    dispatch({ sortedData: currentSortedData });
  }, [tableData, sortings]);

  useEffect(() => {
    if (!searchString) {
      const currentSortedData = sortData(tableData, sortings);
      dispatch({ sortedData: currentSortedData });
    }
  }, [searchString]);

我已经添加了我已经尝试过的，并且取得的成果

工作