代码无法过滤数组问题排查：我的实现遗漏了什么？

嘿，我帮你找出了代码里的几个关键问题，咱们一步步来解决：

1. 过滤函数的语法错误 #

你在myFunc里的filter调用写法完全错了——isFiltered = searchItem => (item) => ...这种嵌套箭头函数的赋值逻辑根本不符合数组过滤的要求。我们只需要直接给filter传入一个判断函数，用全局的searchItem来匹配数组项的标题就行。

2. 输入变化后没触发重新渲染 #

你的onSearchChange只是更新了searchItem变量，但没调用myFunc()来重新计算过滤结果并更新页面，所以输入框敲完内容，页面完全没反应。

3. HTML标签未闭合 #

extractProps里最后一个<span>写成了<span>而不是</span>，这会导致HTML结构错乱，渲染出来的内容可能会出问题。

修正后的完整代码 #

HTML部分：

<form> 
  <input type="text" id="searchTerm" onChange="onSearchChange(this.value)" />
</form> 
<div id="root"></div>

JavaScript部分：

var searchItem = "";
const list = [
  {
    title: 'React',
    url: 'https://facebook.github.io/react/',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'https://github.com/reactjs/redux',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5,
    objectID: 1,
  },
];

// 输入变化时更新搜索词，并触发重新渲染
function onSearchChange(value) {
  searchItem = value;
  myFunc(); // 关键：每次输入都重新执行过滤和渲染
}

// 修复标签闭合，用模板字符串让代码更清晰
function extractProps(items) {
  return `<div>
            <span>${items.title}, </span>
            <span>${items.author}</span>
          </div>`;
}

function myFunc() {
  const root = document.getElementById('root');
  root.innerHTML = "";
  
  // 正确的过滤逻辑：忽略大小写匹配标题
  const filteredList = list.filter(item => 
    item.title.toLowerCase().includes(searchItem.toLowerCase())
  );
  
  // 把过滤后的数组转成HTML字符串并渲染
  const renderedHtml = filteredList.map(extractProps).join("");
  root.innerHTML = renderedHtml;
}

// 页面加载时先渲染初始列表
myFunc();

现在你输入关键词（比如"react"或者"redux"），页面就会实时过滤并显示匹配的项了。

内容的提问来源于stack exchange，提问作者Osama Sohail