时间戳

首页 > 解决方案 > 使用 React / Redux 在特定情况下检索过滤后的数组长度

redux - 使用 React / Redux 在特定情况下检索过滤后的数组长度

问题描述

尽管我找不到好的解决方案，但我需要一些帮助来解决非常基本的需求。为了让我的表格分页工作，我有这个方法

renderList() {

let flowList;

if (this.props.isLoaded && Object.keys(this.props.flows).length > 0) {
  flowList = Object.entries(this.props.flows).sort(this.filterFlowListByColumn())
    .filter(([idx, flow]) => {
      let tree = MOTIVE_TREES.findItem(flow.productId);
      let macroProcess = tree.macroProcesses[flow.macroId];
      let microProcess = macroProcess.microProcesses[flow.microId];
      let detail = microProcess.details[flow.detailId];
      let subPop = detail.subpops ? detail.subpops[flow.subPopId] : '';
      return this.filterFlows(this.state.searchRegex, [flow.name, tree.productName, macroProcess.name, microProcess.name, detail.name, subPop.name ? subPop.name : '-'])
    })
    .map(([idx, flow]) => {
      let tree = MOTIVE_TREES.findItem(flow.productId);
      let macroProcess = tree.macroProcesses[flow.macroId];
      let microProcess = macroProcess.microProcesses[flow.microId];
      let detail = microProcess.details[flow.detailId];
      let subPop = detail.subpops ? detail.subpops[flow.subPopId] : '';
      return (
        <tr key={flow.identifier} >
          <td className='justify'>{flow.name}</td>
          <td className='text-center'>{tree.productName}</td>
          <td className='text-center'>{macroProcess.name}</td>
          <td className='text-center'>{microProcess.name}</td>
          <td className='text-center'>{detail.name}</td>
          <td className='text-center'>{subPop.name ? subPop.name : '-'}</td>
          <td className='text-center'>
            <Button title='Editar este Fluxo' className='listItemEdit fa fa-pencil-square fa-sm' color='link' tag={Link} onClick={() => { this.props.getStateList(flow) }} to={`/${FLOWS}/flowEditor/${idx}`}></Button>
            &nbsp;
        <Button title='Remover este Fluxo' className='listItemRemove fa fa-trash fa-sm' color='link' onClick={() => this.removeFlowConfirmation(idx)}></Button>
          </td>
        </tr>
      )

    })
      if(this.state.flowLength !== flowList.length){

        this.setState({flowLength: flowList.length})
      }
  return flowList.slice(this.state.currentPage * this.state.pageSize - this.state.pageSize, this.state.currentPage * this.state.pageSize);
} else {
}

当用户通过在搜索输入上键入来过滤此数组时，我需要检索 flowList 长度，问题是如果我这样做 -

 if(this.state.flowLength !== flowList.length){

            this.setState({flowLength: flowList.length})
          }

在 Render 方法中，它可以工作，但根据 React 它也是反模式，我只是想不出一种方法来检索它，通过使用 react 中的 ComponentUpdate 方法或在 Redux 中设置一个 Action，有人可以帮助我吗？是否可以在不改变太多代码结构的情况下实现这一点？

谢谢。

标签： reduxpaginationreact-redux

解决方案

我自己设法找到了一个解决方案，我刚刚在 componentDidUpdate() 方法中编写了数组的第一个过滤部分，结果是这样的：

if (this.props.isLoaded && (prevProps.isLoaded !== this.props.isLoaded
  || this.state.inputSearchText !== prevState.inputSearchText
  || this.state.reverseSort !== prevState.reverseSort
  || this.state.columnId !== prevState.columnId)) {
  let flowList = Object.entries(this.props.flows).sort(this.filterFlowListByColumn())
    .filter(([idx, flow]) => {
      let tree = MOTIVE_TREES.findItem(flow.productId);
      let macroProcess = tree.macroProcesses[flow.macroId];
      let microProcess = macroProcess.microProcesses[flow.microId];
      let detail = microProcess.details[flow.detailId];
      let subPop = detail.subpops ? detail.subpops[flow.subPopId] : '';
      return this.filterFlows(this.state.searchRegex, [flow.name, tree.productName, macroProcess.name, microProcess.name, detail.name, subPop.name ? subPop.name : '-'])
    })
  this.setState({ flowList, flowLength: flowList.length });

}

现在我就这样离开了，如果有人提出更好的解决方案，我会很感激的。谢谢。

推荐阅读