javascript - 在反应中使用'useMemo'时仅在数组中显示匹配的字符串

Question

我有一个自动完成输入字段，并且在最初将输出隐藏在我的数组中时遇到了问题。而不是在安装时显示我的所有项目，我只想显示匹配的字符串。让我的状态为空const [filteredRecipes, setFilteredRecipes] = useState();会在我的循环中引发错误。

Codesanbox： https ://codesandbox.io/s/quzwg?file=/App.js:251-313

JS：

export default function App() {
  const items = useMemo(
    () => ["item1", "item2", "anotheritem", "yetanotheritem", "myitem"],
    []
  );

  const [search, setSearch] = useState("");
  const [filteredRecipes, setFilteredRecipes] = useState(items);

  const handleSearchChange = event => {
    setSearch(event.target.value);
  };

  useEffect(() => {
    setFilteredRecipes(
      items.filter(el => el.toLowerCase().includes(search.toLowerCase()))
    );
  }, [search, items]);

  return (
    <div>
      <input
        type="search"
        placeholder="type here to filter"
        value={search}
        onChange={handleSearchChange}
      />
      <div>
        {filteredRecipes.map(recipe => (
          <p>{recipe}</p>
        ))}
      </div>
    </div>
  );
}

Answer 1

如果我正确理解了您的问题，那么在您的示例filteredRecipes中是您希望在安装时最初隐藏的自动完成建议，或者在此处做出假设，只要搜索值是错误的。您可以通过有条件地过滤search状态为真/假来做到这一点。所有字符串都将包含空字符串 ( '')，因此您希望以不同的方式处理这种情况。

setFilteredRecipes(
  search
    ? items.filter((el) => el.toLowerCase().includes(search.toLowerCase()))
    : []
);

代码

export default function App() {
  const items = useMemo(
    () => ["item1", "item2", "anotheritem", "yetanotheritem", "myitem"],
    []
  );

  const [search, setSearch] = useState("");
  const [filteredRecipes, setFilteredRecipes] = useState([]);

  const handleSearchChange = (event) => {
    setSearch(event.target.value);
  };

  useEffect(() => {
    setFilteredRecipes(
      search
        ? items.filter((el) => el.toLowerCase().includes(search.toLowerCase()))
        : []
    );
  }, [search, items]);

  return (
    <div>
      <input
        type="search"
        placeholder="type here to filter"
        value={search}
        onChange={handleSearchChange}
      />
      <div>
        {filteredRecipes.map((recipe) => (
          <p>{recipe}</p>
        ))}
      </div>
    </div>
  );
}