реагировать на родной рендер

Question

Я запустил forEach внутри блока рендеринга, и он нормально выводится на консоль, но текстовый тег не отображается на выходе.

В чем проблема?

import React from "react";
import { StyleSheet, Text, View } from "react-native";

class Lotto extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 6,
      maxNum: 45
    };

    this.lottoSet = this.createLottoNumber();
  }

  createLottoNumber() {
    let lottoSet = new Set();
    let rNum;

    for (let i = 0; i < this.state.count; i++) {
      rNum = Math.round(Math.random() * (this.state.maxNum * 1) + 1);
      if (lottoSet.has(rNum)) i--;
      else lottoSet.add(rNum);
    }

    return lottoSet;
  }

  render() {
    return (
      <View style={styles.container}>
        {this.lottoSet.forEach(n => {
          console.log(`<Text style={styles.item}>${n.toString()}</Text>`);
          return <Text style={styles.item}>{n.toString()}</Text>;
        })}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#333",
    flexDirection: "row",
    paddingTop: "10%",
    justifyContent: "center"
  },
  item: {
    color: "#fff",
    textAlign: "center",
    width: "100px"
  }
});

export default Lotto;

Answer 1

Вы должны использовать карту вместо визуализации элементов.

render() {
    return (
      <View style={styles.container}>
        {this.lottoSet.map(n => (
          <Text style={styles.item}>{n.toString()}</Text>
        )}
      </View>
    );
  }

React является декларативным и принимает для отображения декларацию состояния представления, карта будет создавать объявленное неизменное состояние просмотра. Принимая во внимание, что использование forEach потенциально может создавать побочные эффекты вне метода рендеринга, поэтому не поддерживается.

Answer 2

forEach не возвращает значение, но обозначает выполнение побочных эффектов для каждого элемента массива. Вместо этого вы ищете map:

  <View style={styles.container}>
    {this.lottoSet.map(n => {
      console.log(`<Text style={styles.item}>${n.toString()}</Text>`);
      return <Text key={n.toString()} style={styles.item}>{n.toString()}</Text>;
    })}
  </View>

Также обратите внимание, что я добавляю key проп к каждому элементу Text, вы можете прочитать об этом здесь: https://reactjs.org/docs/lists-and-keys.html

Кстати, тот факт, что вы однажды вызвали createLottoSet в конструкторе, означает, что он не будет генерироваться при каждом изменении состояния.