Reactjs 通过高阶组件反应搜索筛选器（挂钩）不工作

我尝试让我的React搜索框过滤器工作

看看我到目前为止都做了些什么

我有一个HOC

和section.js

，其中我（目前）只向我的组件添加了一个

标记：

const withSection = Component => props => (
  <section>
    <Component {...props} />
  </section>
)

constwithsection=Component=>props=>(
)

然后在父组件中，我将我的SearchBox组件包装到这个HOC中并呈现它：

const SectionSearchBox = withSection(SearchBox);

<SectionSearchBox search={search} setSearch={setSearch} />

const section SearchBox=with section（SearchBox）；

不知怎的，当我把我的搜索框包装到这个HOC中时，它会破坏功能吗

---

这里出了什么问题？

您需要将

SectionSearchBox

声明在其父组件的范围之外。在codesandbox示例中，它看起来像：

import withSection from "./hoc/withSection";
import SearchBox from "./SearchBox";

const SectionSearchBox = withSection(SearchBox);

function ArticlePage() {
  ...
};

---

否则，将使用其父级的每个新渲染重新创建该组件的每个实例（即，当搜索项更改时）。这导致搜索框在每个按键笔划时都显示为未聚焦，因为新的输入元素与上一次渲染的值一起放置到位。

请查看是否确实有问题？我只是尝试了一下沙盒，在输入中输入了一个，它过滤了结果。看起来不错。@Gh05d我更新了问题。这和我的高阶组件有关，我想…很多。因此，由于使用效应。这是有道理的。