javascript - 如何通过应用过滤器来渲染Reducer？

Question

我的 reducer 是:

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 显示所有数据并映射它:

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 的对象，并显示相应父对象下方的其他对象。我想要实现的是:

我的理解是，我需要添加一个过滤器，该过滤器仅显示具有 parentId: 0 的对象，并在其下方添加一个函数 (const renDataChild)将获取当前 id 并仅显示与 parentId 与传递的 id 匹配的对象。这是正确的方法吗？如何添加过滤器并为子对象创建 const renDataChild？

请帮忙。非常感谢。

更新1:

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)。您可能返回了未定义的数组或其他无效对象。

尝试过:

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

同样的错误

Answer 1

我认为你应该递归地渲染你的评论，因为当你渲染评论时，你必须循环遍历评论数组以查找当前评论下是否有子评论。类似的东西(此代码未经测试，可能有一些错误):

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