Question

我试图编写一个递归函数来显示讨论（对话和回复）树。

export default class SocialPost extends Component {
  constructor(props) {
    super(props);
  }

  replies = data => {
    return data.map(item => {
      return <View key={item._id}>{this.individualPost(item)}</View>;
    });
  };

  individualPost = data => {
    return (
      <View>
        <View style={styles.container}>
          <Text>{data.comment}</Text>
        </View>
        {data.replies.length && this.replies(data.replies)}
      </View>
    );
  };

  render() {
    return <View>{this.individualPost(this.props.data)}</View>;
  }
}

    data = [
      {
        replies: [
          {
            replies: [],
            _id: "5cb07bb28346d729a25dfc38",
            comment: "xyz"
          }
        ],
        _id: "5cb07b8a8346d729a25dfc37",
        comment: "abc"
      }
    ];

但我却收到此错误：不变违规：文本字符串必须在组件中呈现。

我该怎么做才能解决此问题？

Answer 1

问题可能在此行上：{data.replies.length && this.replies(data.replies)}。

如果data.replies.length为0，则不会调用&&之后的部分。这意味着React将尝试在那里呈现字符串“ 0”，这是不允许在<Text>组件外部进行的。

一种解决方案是只做{this.replies(data.replies)}，然后在没有回复的情况下从null函数返回replies()。

Answer 2

data.comment在您的第一次通过时不存在。数据只是一个数组，因此，您需要在本征中渲染本来没有东西的东西。错误实际上是在告诉您只能在此处显示文本。您正在尝试呈现数据类型。

individualPost = data => {
    return (
      <View>
        <View style={styles.container}>
          <Text>{data.comment}</Text> //your problem
        </View>
        {data.replies.length && this.replies(data.replies)}
      </View>
    );
  };

递归：如何解决错误“不变违反：文本字符串必须在<text>组件内呈现。”

2 个答案: