过滤后我需要重置状态

Posted 2023-02-23

【中文标题】过滤后我需要重置状态

【英文标题】：I need to reset the state after filtering

【发布时间】：2021-02-05 20:24:21

【问题描述】：

我的父组件中有一个函数，它获取所选项目的文本并过滤来自 api 的响应，但是一旦过滤并显示结果，我需要将它重置为文本的无值，所以如果需要，用户可以进行多次搜索。这是过滤的父组件的一部分：

class Providers extends Component 
  state = 
    scope: "all",
    listItems: [],
  ;

componentDidMount () 
   api.Providers.list( scope: this.state.scope )
   .then(response => 
     this.setState(listItems: response.items)
    
   )

dropSearch = (e) => 
  
  let filteredList = this.state.listItems.slice().filter(i => i.fullName.includes(e) ||  i.active.includes(e) || i.capabilities.geographic && i.capabilities.geographic.includes(e))
  this.setState(listItems: filteredList)

render() 
    const isManager =
      this.props.currentUser &&
      this.props.currentUser.permissions.indexOf("manage") !== -1;
    const isDirector =
      this.props.currentUser &&
      this.props.currentUser.permissions.indexOf("medicalDirector") !== -1;
    return (
 <RemoteList
              listItems=this.state.listItems
              listName="providers"
            >
              <List onProviderStateChange=this.providerStateChanged dropSearch=this.dropSearch/>
            </RemoteList>
);
  

这是我通过 dropSearch 道具在子组件中获取我传递给父级的值的地方：

const List = (
  items,
  permissions,
  currentUser,
  onProviderStateChange,
  dropSearch,
  ...props
) => 
  
  const providers = items || [];
  const hasAudit = permissions.indexOf("medicalDirector") !== -1;
  const hasEdit = permissions.indexOf("manage") !== -1;


  return (
    <Table className="provider-list">
      <thead>
        <Row className="provider-header">
          <Col md=hasAudit ? "2" : "3">
            <UncontrolledDropdown>
              <DropdownToggle tag="a" caret>
                Provider
              </DropdownToggle>
              <DropdownMenu style= maxHeight:"400px", overflow: "scroll">
                providers.map((name) => (
                  <DropdownItem tag="a" onClick=(e) => dropSearch(e.target.text) style= color: "rgb(68, 68, 68)", fontSize: "12px" >name.fullName</DropdownItem>
                ))
              </DropdownMenu>
            </UncontrolledDropdown>
          </Col>
          <Col md=hasAudit ? "2" : "3">
            <UncontrolledDropdown>
              <DropdownToggle tag="a" caret>
                Location
              </DropdownToggle>
              <DropdownMenu style= maxHeight:"400px", overflow: "scroll">
                stateChoices.map((states) => (
                  <DropdownItem tag="a" onClick=(e) => dropSearch(e.target.text) style= color: "rgb(68, 68, 68)", fontSize: "12px" >states</DropdownItem>
                ))
              </DropdownMenu>
            </UncontrolledDropdown>
          </Col>

如何在渲染后将 e.target.value 重置为空，以便用户可以再次搜索？

【参考方案1】：

您无需更改列表，始终保持完整版本。 然后在 dropSearch 上，只需将搜索文本保存到状态，然后按它进行过滤，如下所示：

dropSearch = (searchValue) => 
 this.setState(searchValue)

然后在您的列表中放入完整列表并即时过滤。您可以使用一些辅助功能

filterListItemsHelper () => 
  const searchValue = this.state;
  return this.state.listItems.slice().filter(i => i.fullName.includes(searchValue) ... || [];


<RemoteList
    listItems=this.filterListItemsHelper()
    listName="providers"
 >

【讨论】：

我理解你不改变状态的观点。但是我对您在示例代码中所做的事情有点困惑，您是否建议我将状态设置为 searchValue？因为现在在我的组件中，状态包含返回的结果列表，而不是用户搜索的值。

你用 this.setState(listItems:filteredList) filterredItems 重写了你的 listItems，完整的列表已经不存在了。所以就离开吧。而是为 searchValue 保存附加变量，并在您将列表放入 RemoteList 组件时 - 过滤它 item。 fullName.includes(this.state.searchValue)