简化自动建议的设计

Question

在我的代码中有一个相当复杂的结构，它在const matchedSuggestions中。这个建筑负责自动建议.例如:有几个男性的名字(亚当，禤浩焯，阿诺德，迈克)。用户输入第一个字母"A“，并看到自动建议-亚当，禤浩焯，阿诺德。然后，他输入字母"D“，并保留在自动建议-亚当，禤浩焯。诸若此类。

是否有可能以某种方式简化代码的这一部分？

const onChange = (e) => {
  const { value } = e.target;
  setInput(value)

  if(value.length < 1) { setSuggestedTags([]); setIsValid([]);return; }
  
  const matchedSuggestions = tagSuggestions.filter((s) => {
    return s.slice(0, 2).search(value.slice(0, 2)) > -1 
        && s.slice(0, 1).search(value.slice(0, 1)) > -1
        && s.slice(0, 3).search(value.slice(0, 3)) > -1
        && !tags.includes(s)
  })
  setSuggestedTags(matchedSuggestions); 

  if (e.target.value) {
    setIsValid(() => /^[1-5][0-9]?[0-9]?$|^100$/.test(e.target.value));
  } else {
    setIsValid(true);
  }
  setInput(value);
};

Answer 1

您可以获取输入字符串的长度，并将其用作切片索引。更好的是，您可以使用startsWith，如果需要将其归一化为大小写，如

 value = value.toLowerCase();             // normalize
 tagSuggestions.filter(s =>
     s.toLowerCase().startsWith(value) && // or includes(value) in case you want to validate part of the string
     !tags.includes(s)                    // what is this for?
 );