过滤后我需要重置状态答案

【问题标题】：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 重置为空，以便用户可以再次搜索？

【问题讨论】：

标签： javascript reactjs components react-props

【解决方案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)}