时间戳

首页 > 解决方案 > 最好的方法是过滤内部数据以进行渲染？

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

问题描述

我是 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)
  };
};

标签： reactjsecmascript-6redux

解决方案

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

还要考虑到您调用FilterPrograms地图的变量，这很令人困惑，因为它是当前程序，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>
    );
  }
}

推荐阅读