Блог

Я пытаюсь написать рекурсивную функцию для отображения дерева обсуждений (диалогов и ответов).

 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 amp;amp; 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"
      }
    ];
  

но вместо этого я получаю эту ошибку: инвариантное нарушение: текстовые строки должны отображаться внутри компонента.

Что я могу сделать, чтобы решить эту проблему?

Проблема, вероятно, в этой строке : {data.replies.length amp;amp; this.replies(data.replies)} .

Если data.replies.length равно 0, часть после amp;amp; не будет вызвана. Это означает, что React попытается отобразить там строку «0», что запрещено вне <Text> компонента.

Решением было бы просто выполнить {this.replies(data.replies)} , а затем вернуться null из replies() функции, когда ответов нет.

data.comment не существует при первом проходе. Данные — это просто массив, поэтому реагирующие вещи, которые вы пытаетесь отобразить здесь, без их существования. Ошибка буквально говорит вам, что там может отображаться только текст. Вы пытаетесь отобразить тип данных.

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