Рекурсия: Как исправить ошибку «Нарушение инварианта: текстовые строки должны отображаться в компоненте <Text>».

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