Получение длины отфильтрованного массива в определенной ситуации с использованием React / Redux - PullRequest
Новая
       29

Получение длины отфильтрованного массива в определенной ситуации с использованием React / Redux

0 голосов
/ 28 февраля 2019

Мне нужна помощь с очень простой потребностью, хотя я не могу найти хорошее решение.Для того, чтобы моя разбивка на таблицы работала, у меня есть этот метод 

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, я просто не могу найти способ получить это, используя ComponentUpdate методы от реакции или установки Actionв Redux, кто-нибудь может мне помочь?Можно ли достичь этого, не слишком меняя структуру кода?

Спасибо.

1 Ответ

0 голосов
/ 28 февраля 2019

Мне удалось найти решение самостоятельно, я только что закодировал первую фильтрующую часть массива в методе 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 });

}

А пока я оставлю какэто, если кто-нибудь придумает лучшее решение, я буду благодарен.Спасибо.

...