React Todo List应用搜索框内容更新时的条件渲染实现问题

现有代码问题 #

• 正则创建逻辑错误：使用new RegExp()构造函数时不需要手动添加左右斜杠，你写的"/" + searchValue + "/gt"会把斜杠也识别为匹配规则的一部分，同时gt是无效正则标志位，常规搜索场景只需添加i标志即可实现忽略大小写匹配。
• 不符合React最佳实践：不建议将JSX元素存入state，更合理的做法是state仅存储原始待办数据、搜索关键词，渲染时动态计算匹配列表，性能更优且便于维护。

修正方案 #

首先添加正则特殊字符转义逻辑，避免用户输入.+*?[]()等正则保留字符时触发语法错误：

const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

在组件渲染前动态计算匹配的待办列表：

// 假设搜索关键词已存储在searchValue state中
const getFilteredList = (list) => {
  const trimedSearch = searchValue.trim()
  // 搜索值为空时返回全部内容
  if (!trimedSearch) return list
  const searchRegex = new RegExp(escapeRegExp(trimedSearch), 'i')
  return list.filter(item => searchRegex.test(item.title))
}

const filteredItems = getFilteredList(items)
const filteredDeletedItems = getFilteredList(deletedItems)

渲染环节直接使用过滤后的数组即可，无需调用setContent存储JSX：

return (
  <div>
    {/* 搜索输入框，绑定onChange事件更新searchValue */}
    <input
      type="text"
      placeholder="搜索待办事项"
      value={searchValue}
      onChange={e => setSearchValue(e.target.value)}
    />

    {filteredItems.map(item => (
      <ToDoPane
        key={item.id}
        item={item}
        delFunc={deleteItem}
        done={addToDeletedItems}
        edit={editItem}
      />
    ))}

    <div className="doneWalaDiv">
      {filteredDeletedItems.map(item => (
        <ToDoPane
          key={item.id}
          item={item}
          delFunc={deleteFromDeletedItems}
          done={addItem}
          edit={editItem}
          type="checked"
        />
      ))}
    </div>
  </div>
)

如果需要严格区分大小写匹配，删除RegExp构造函数的第二个参数i即可。

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