如何通过应用滤镜渲染Reducer? [英] How to render Reducer by applying filter?

问题描述

我的减速器是:

const initialState = {
  1: {
     id: '1',
     user: 'User1',
     text: 'User1 Comment',
     parentId: 0,
    },
  2: {
     id: '2',
     user: 'User2',
     text: 'User2 Comment',
     parentId: 0,
    },
  3: {
     id: '3',
     user: 'User1',
     text: 'User1 SubComment',
     parentId: 2,
    },
  4: {
     id: '4',
     user: 'User2',
     text: 'User2 SubComment',
     parentId: 3,
    },
  5: {
     id: '5',
     user: 'User1',
     text: 'User1 SubComment',
     parentId: 2,
    },
}

我有mappedStateToProps，并且能够使用Object.keys并映射它来显示所有数据:

I have mappedStateToProps and able to show all the data using Object.keys and mapping it:

const renData = Object.keys(this.props.comments).map((key, idx) => {
  let comment = this.props.comments[key]
    return(
      <View key={idx}>
        <Text>
        { comment.id } - { comment.user } - { comment.text} - { comment.parentId }
        </Text>
          { renDataChild (comment.id) } // NOT SURE ABOUT THIS
      </View>
    )
  })

我只想显示具有parentId: 0的objects，并在各自的父对象下面显示其他对象.我要实现的是:

I want to show only the objects that have parentId: 0 and show the other objects below the respective parent objects. What i want to achieve is :

我了解的是，我需要添加一个仅显示具有parentId: 0的对象的过滤器，并在其下方添加一个将采用当前id并仅显示具有以下内容的对象的函数(const renDataChild):将parentId与传递的id匹配.这是正确的方法吗?如何添加过滤器并为子对象创建const renDataChild?

What I understand is that I need to add a filter that will only show the objects which have parentId: 0 and below that add a function (const renDataChild) that will take the current id and show only the objects that match the parentId with the passed id. Is this the proper way to do it? How do I add the filter and create const renDataChild for child objects?

请帮助.非常感谢.

UPDATE1:

import React, { Component } from 'react';
import { Text, View, Alert } from 'react-native';

var styles = require('../styles'); 
var styles1 = require('../styles1'); 

import { connect } from 'react-redux';

class CommentsNew extends Component {

  constructor(props) {
    super();
  }

  componentDidMount() {

  }

 renderComments(commentId = 0) {
  return Object.keys(this.props.comments)
    .filter(id => this.props.comments[id].parentId === commentId)
    .map((key, idx) => {
      const comment = this.props.comments[key];
      const style = commentId === 0 ? styles.comment : styles.subComment;
      <View style={style} key={idx}>
        <Text>
          { comment.id } - { comment.user } - { comment.text} - { comment.parentId }
        </Text>
        {this.renderComments(comment.id)}
      </View>
    });
}

  render() {

     return this.renderComments();

  }
}

function mapStateToProps(state) {
  return {
    comments: state.comments
  }
}

export default connect( mapStateToProps ) (CommentsNew);

错误: CommentsNew.render():必须返回一个有效的React元素(或null).您可能返回了undefined，数组或其他无效对象.

Error: CommentsNew.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

尝试过:

  render() {
     return (
       this.renderComments();
     )
  }

相同错误

推荐答案

我认为您应该以递归方式呈现注释，因为当您呈现注释时，您必须遍历注释数组以查找当前注释下是否存在子注释. .诸如此类(该代码未经测试，可能有一些错误):

I think you should render your comments recursively because when you render a comment you have to loop through the comments array to find if there are sub comments under the current comment. Something like that (this code isn't tested, maybe some errors):

renderComments(commentId = 0) {
  return Object.keys(this.props.comments)
    .filter(id => this.props.comments[id].parentId === commentId)
    .map((key, idx) => {
      const comment = this.props.comments[key];
      const style = commendId === 0 ? styles.comment : styles.subComment;
      return (
        <View style={style} key={idx}>
          <Text>
            { comment.id } - { comment.user } - { comment.text} - { comment.parentId }
          </Text>
          {this.renderComments(comment.id)}
        </View>
      );
    });
}

render() {
  return (
    <View>
      {this.renderComments()}
    </View>
  );
}

这篇关于如何通过应用滤镜渲染Reducer?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！