使用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 {
}

在Render方法中，它可以工作，但根据React，它也是反模式的，我无法找到一种方法来检索它，通过使用React中的ComponentUpdate方法或在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 });

}

---

现在我就这样离开，如果有人能想出更好的解决办法，我将不胜感激。谢谢。

我自己设法找到了解决方案，我刚刚在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 });

}

---

现在我就这样离开，如果有人能想出更好的解决办法，我将不胜感激。谢谢。

首先，为什么需要将

流程表.length

存储在

状态中

？您可以随时从变量

flowList

中使用它，因为我有另一个方法需要从flowList中筛选出这个长度值，以便我的分页可以工作，并且我不能在其他任何地方访问这个Let变量。如果我尝试调用一个同时设置状态的方法，它只会在控制台中给我同样的反模式警告。为什么首先需要将

flowList.length

存储在

state

中？您可以随时从变量

flowList

中使用它，因为我有另一个方法需要从flowList中筛选出这个长度值，以便我的分页可以工作，并且我不能在其他任何地方访问这个Let变量。如果我尝试调用一个同时设置状态的方法，它只会在控制台中给我同样的反模式警告。