Javascript 在react js和redux中过滤时如何返回所有存储

我在我的应用程序中尝试创建“typehead”功能时遇到了一个问题，我有一个“input”来监听onChange，onChange正在调用Redux reducer来搜索hole store中的标签，我需要通过搜索检索所有匹配项，在这里一切正常，但当我删除搜索时，我的洞存储等于我的筛选结果，我希望当我的搜索为空时，它返回我的洞存储。（gif和代码）

---

不要在减速器中过滤东西，而是直接在

render（）

上进行过滤，这样做没有什么问题

---

您仍然可以使用

SEARCH\u BY_标记

操作跟踪搜索关键字，并在呈现列表时使用它应用过滤器。

不要在缩减器中过滤内容，而是直接在

render（）

上执行此操作，这样做没有问题

---

您仍然可以使用

SEARCH\u BY_标记

操作来跟踪搜索关键字，并在呈现列表时使用它来应用过滤器。

我认为您应该重构您的状态以改变它：

[ item1, item2, item3, ... ]

为此：

{
  query: '',
  options: [ item1, item2, item3, ... ]
}

通过这种方式，您可以按照@Raspo在其回答中所说的操作，对渲染函数中的选项进行过滤

当前，当您更改搜索字段中的文本时，您正在调度此操作：

{ 键入：“按标签搜索”， 标记：“新查询” }

我认为您应该更改操作名称和reducer代码，使其看起来更像这样：

// note this is almost exactly the same as the old action
{
  type: 'CHANGE_AUTOCOMPLETE_QUERY',
  query: 'new query'
}

const options = reduxState // not sure exactly how you get the state but whatever
return (
  <div>
    {options.map(option => {
      <Option option={option} />
    })}
  </div>
)

然后减速器可以改变为：

case CHANGE_AUTOCOMPLETE_QUERY:
  return Object.assign({}, state, {
    query: action.query
  })

请注意，在我刚刚编写的reducer案例中，状态的

选项部分根本没有更改。它保持不变

现在，让我们假设您当前的渲染函数如下所示：

// note this is almost exactly the same as the old action
{
  type: 'CHANGE_AUTOCOMPLETE_QUERY',
  query: 'new query'
}

const options = reduxState // not sure exactly how you get the state but whatever
return (
  <div>
    {options.map(option => {
      <Option option={option} />
    })}
  </div>
)

constoptions=reduxState//不确定如何获得状态，但不管怎样
返回(
{options.map（option=>{
})}
)

此代码依赖于以数组形式获取状态。您可以在新设置中更改它以执行以下操作：

const query = reduxState.query
const options = reduxState.options.filter(item => {
  return item.tags.find(obj => {
    if(obj.name.indexOf(query) > -1){
      return true
    }
  })
})
return (
  <div>
    {options.map(option => {
      <Option option={option} />
    })}
  </div>
)

const query=reduxState.query
const options=reduxState.options.filter（项=>{
返回item.tags.find（obj=>{
if（obj.name.indexOf（查询）>-1）{
返回真值
}
})
})
返回(
{options.map（option=>{
})}
)
我认为您应该重构您的状态以改变它：

[ item1, item2, item3, ... ]

为此：

{
  query: '',
  options: [ item1, item2, item3, ... ]
}

通过这种方式，您可以按照@Raspo在其回答中所说的操作，对渲染函数中的选项进行过滤

当前，当您更改搜索字段中的文本时，您正在调度此操作：

{
键入：“按标签搜索”，
标记：“新查询”
}

我认为您应该更改操作名称和reducer代码，使其看起来更像这样：

// note this is almost exactly the same as the old action
{
  type: 'CHANGE_AUTOCOMPLETE_QUERY',
  query: 'new query'
}

const options = reduxState // not sure exactly how you get the state but whatever
return (
  <div>
    {options.map(option => {
      <Option option={option} />
    })}
  </div>
)

然后减速器可以改变为：

case CHANGE_AUTOCOMPLETE_QUERY:
  return Object.assign({}, state, {
    query: action.query
  })

请注意，在我刚刚编写的reducer案例中，状态的
选项部分根本没有更改。它保持不变

现在，让我们假设您当前的渲染函数如下所示：

// note this is almost exactly the same as the old action
{
  type: 'CHANGE_AUTOCOMPLETE_QUERY',
  query: 'new query'
}

const options = reduxState // not sure exactly how you get the state but whatever
return (
  <div>
    {options.map(option => {
      <Option option={option} />
    })}
  </div>
)

constoptions=reduxState//不确定如何获得状态，但不管怎样
返回(
{options.map（option=>{
})}
)

此代码依赖于以数组形式获取状态。您可以在新设置中更改它以执行以下操作：

const query = reduxState.query
const options = reduxState.options.filter(item => {
  return item.tags.find(obj => {
    if(obj.name.indexOf(query) > -1){
      return true
    }
  })
})
return (
  <div>
    {options.map(option => {
      <Option option={option} />
    })}
  </div>
)

const query=reduxState.query
const options=reduxState.options.filter（项=>{
返回item.tags.find（obj=>{
if（obj.name.indexOf（查询）>-1）{
返回真值
}
})
})
返回(
{options.map（option=>{
})}
)