在 React 中过滤状态而不删除数据

IT技术 javascript reactjs
2021-05-12 23:48:13

我正在尝试制作一个可以根据从下拉框中选择的值过滤列表的react组件。由于setState从数组中删除了所有数据，我只能过滤一次。如何过滤数据并保持原始状态？我希望能够做更多的搜索。

数组列表：

  state = {
tree: [
  {
    id: '1',
    fileType: 'Document',
    files: [
        {
          name: 'test1',
          size: '64kb'
        },
        {
          name: 'test2',
          size: '94kb'
        }
    ]
  }, ..... and so on

我有两种方法可以过滤组件一次：

  filterDoc = (selectedType) => {
   //way #1
   this.setState({ tree: this.state.tree.filter(item => item.fileType === selectedType) })

  //way#2
  const myItems = this.state.tree;
  const newArray = myItems.filter(item => item.fileType === selectedType)
  this.setState({
    tree: newArray
  })      
}

搜索组件：

class SearchBar extends Component {

  change = (e) => {
    this.props.filterTree(e.target.value);
  }

  render() {
      return (
        <div className="col-sm-12" style={style}>
            <input
            className="col-sm-8"
            type="text"
            placeholder="Search..."
            style={inputs}
            />
            <select
            className="col-sm-4"
            style={inputs}
            onChange={this.change}
            >
                <option value="All">All</option>
              {this.props.docTypes.map((type) =>
                <option
                  value={type.fileType}
                  key={type.fileType}>{type.fileType}
                </option>)}
            </select>
        </div>
      )
  }
}

还有一些图像只是为了直观地了解问题。过滤前： 在此处输入图片说明

过滤后，所有不匹配的都从状态中删除：

在此处输入图片说明

2个回答

不要替换原始数据

相反，更改使用的过滤器并在render()函数中进行过滤。

在下面的示例中，原始数据（称为data）永远不会更改。仅更改使用的过滤器。

const data = [
  {
    id: 1,
    text: 'one',
  },
  {
    id: 2,
    text: 'two',
  },
  {
    id: 3,
    text: 'three',
  },
]

class Example extends React.Component {
  constructor() {
    super()
    this.state = {
      filter: null,
    }
  }

  render() {
    const filter = this.state.filter
    const dataToShow = filter
      ? data.filter(d => d.id === filter)
      : data

    return (
      <div>
        {dataToShow.map(d => <span key={d.id}> {d.text}, </span>)}
        <button
          onClick={() =>
            this.setState({
              filter: 2,
            })
          }
        >
          {' '}
          Filter{' '}
        </button>
      </div>
    )
  }
}

ReactDOM.render(<Example />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<body>
  <div id='root' />
</body>

不要改变本地状态来反映过滤器的当前状态。该状态应反映完整的可用列表，仅在选项列表更改时才应更改。严格将过滤后的数组用于视图。像这样的事情应该是您改变呈现给用户的内容所需的全部内容。

change = (e) => {
   return this.state.tree.filter(item => item.fileType === e.target.value)
}
其它你可能感兴趣的问题
上一篇Javascript 通过包含搜索词的标签子数组过滤或减少每个 JSON 对象 下一篇React 类组件与功能组件