Question

我正在尝试实现一种搜索功能，该功能将遍历JSON数组的人员，这些人员的JSON对象具有“标签”。搜索功能接受输入以搜索标签，并且在给定当前输入字符串的情况下，我似乎正在用适当的人员填充中间数组，但是我用于搜索组件的数组（带有钩子）仅检索tail元素。这显然是不正确的，我目前不确定解决方法。下面的一些代码和屏幕截图。任何帮助将不胜感激。

runnerArray，输入为“ pol”，只有两个条目带有带有前缀“ pol”的标签，它们都出现在此数组中：https://imgur.com/a/rdVNgxp

filteredResults，这绝对是不正确的：https://imgur.com/a/AuPeZ1h

在搜索栏上显示

filteredResults输出：https://imgur.com/a/MNZi9tC

JSON数组的摘录：

{
    title: "Chana Fodeman",
    description: "",
    image: require("./SearchMedia/Pre-WWII/Chana.Fodeman025.jpeg"),
    tags: [
      "chana",
      "fodeman ",
      "david's wife",
      "actress",
      "1930",
      "warsaw",
      "poland",
      "pre-wwII"
    ]
  },
..
{
    title: "Leon Glazer",
    description: "",
    image: require("./SearchMedia/Pre-WWII/Leon.Glazer143.jpeg"),
    tags: [
      "leon",
      "glazer",
      "polish",
      "army",
      "may",
      "5/26/1927",
      "lodz",
      "pre-wwII"
    ]
  },

App.js 这是我用于搜索输入的onChange方法。我正在遍历searchData，该数据由上面截断的整个json文件组成。我了解到，每次循环浏览时，我都会在那一刻将一个完全不同的JSON数组追加到RunnerArray，这可能是错误。但是我现在很困惑。 “搜索”基于语义UI React的搜索组件，我已经对其进行了扩展以浏览标签而不是标题。

const handleSearchInput = (e, { value }) => {
    console.log("running handleSearchInput");
    const searchQuery = value.toLowerCase();
    setIsLoading(true, value);
    setValue(value);
    let tagMatchArray = searchData;
    let runnerArray = [];

    setTimeout(() => {
      if (searchQuery.length === 0) {
        setIsLoading(false);
        setValue("");
        setFilteredResults([]);
        runnerArray = [];
      }
      const re = new RegExp(_.escapeRegExp(value), "");
      const match = figure => {
        return figure.tagMatch === true;
      };

      tagMatchArray.forEach(figure => {
        figure.tags.forEach(tag => {
          figure.tagMatch = false;
          if (tag.includes(searchQuery)) {
            console.log("tag match found:", searchQuery);
            setLoading(false);
            figure.tagMatch = true;
            runnerArray.push(tagMatchArray.filter(match));
            setFilteredResults(tagMatchArray.filter(match));
            console.log("Runner array:", runnerArray);

          }
        });
      });

      console.log("Filtered Results:", filteredResults);
    }, 300);
  };

...
 <NavItem>
                <Search
                  className="search-bar"
                  loading={isLoading}
                  onResultSelect={handleResultSelect}
                  onSearchChange={_.debounce(handleSearchInput, 500, {
                    leading: true
                  })}
                  results={filteredResults}
                  value={value}
                  size="small"
                />
              </NavItem>

使用React钩子错误地更新数组

0 个答案: