最好的方法是过滤内部数据以进行渲染？答案

【问题标题】：It is best way filter data inside to render?最好的方法是过滤内部数据以进行渲染？
【发布时间】：2019-01-16 14:14:30
【问题描述】：

我是 Redux 的新手。我尝试过滤我的代码并传递给其他路由器组件页面。是在渲染方法中过滤我的数据的最佳方法还是我应该在其他任何地方这样做？以及如何将我的道具传递给其他路由器页面？

我关注；

这是第一个组件页面。

class Home extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.actions.getProgramsStart();
  }
  render() {
  const { ProgramsLoading, programs } = this.props.state;
  if(programs) {
      const SeriesFilterData=[];
      const MoviesFilterData =[];
    programs.map(FilterPrograms => {
      if(FilterPrograms.programType==="series" && FilterPrograms.releaseYear >= 2010){
        SeriesFilterData.push(FilterPrograms);
      }
      if(FilterPrograms.programType==="movie" && FilterPrograms.releaseYear >= 2010){
        MoviesFilterData.push(FilterPrograms);
      }
    });
  }
    return (
      <div id="home">
          { ProgramsLoading ? <div><Loader style={{ display: "block" }} content="Program List loading" /></div> : <h1>program data</h1> }
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    state: {
      ...state.home
    }
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(homeActions, dispatch)
  };
};

【问题讨论】：

标签： reactjs ecmascript-6 redux

【解决方案1】：

是的，您可以通过返回之前基于您的 ProgramsLoading 的内容来避免进入过滤器，然后更改您的 map，它返回一个空数组并在每个渲染中为 reduce 创建 2 个额外的数组，这将使用一个只有您需要的 2 个数组的对象，所有内容都在 1 个循环中。

还要考虑到您将 FilterPrograms 调用到 map 的变量，这很令人困惑，因为它是当前程序，而 FilterPrograms 听起来更像是一个函数。

class Home extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.actions.getProgramsStart();
  }
  render() {
  const { ProgramsLoading, programs } = this.props.state;
  //check if you are loading, so you dont need to apply filters or whatever you add (filter/map creates a new array each time)
  if(ProgramsLoading) return <div><Loader style={{ display: "block" }} content="Program List loading" /></div>

  const defaultValue = {SeriesFilterData: [], MoviesFilterData =[]}
  const reducerFunction = (accum, currentValue)=>{
      //if this check is an AND for all the cases, return directly if the item doesnt match.
      if(currentValue.releaseYear < 2010) return accum;
      if(currentValue.programType==="series"){
         accum.SeriesFilterData.push(currentValue);
      } else if(currentValue.programType==="movie"){
         accum.MoviesFilterData.push(currentValue);
      }
      return accum;
  }
  const results = programs.reduce( reducerFunction, defaultValue);
    // using {...result} will destructure to be (SeriesFilterData, MoviesFilterData) separeted props
    return (
      <div id="home">
          <h1>program data</h1>
          <SomeComponent {...resulst} /> 
      </div>
    );
  }
}

【讨论】：