Question

我的减速机是：

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

我想只显示objects parentId: 0并显示相应父对象下方的其他对象。我想要实现的是：

我的理解是，我需要添加一个过滤器，该过滤器只会显示parentId: 0及以下的对象，这些对象会添加一个将占用当前const renDataChild的函数（id）并仅显示与parentId匹配的对象与传递的id。这是正确的方法吗？如何添加过滤器并为子对象创建const renDataChild？

请帮忙。非常感谢。

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，数组或其他一些无效对象。

尝试过：

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

相同错误

Answer 1

我认为你应该递归地呈现你的注释，因为当你渲染注释时，你必须循环遍历comments数组，以查找当前注释下是否有子注释。类似的东西（这段代码没有经过测试，可能还有一些错误）：

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？

1 个答案: