react native render foreach循环

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react native render 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;

你好。我是一名学习React的学生。

生成随机数的代码。

我在渲染块内运行了forEach,它通常在控制台,但文本标记未显示在输出中。

怎么了?

答案

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

另一答案

您必须使用map来渲染元素,React是声明性的,并且需要声明视图状态来进行渲染。

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

以上是关于react native render foreach循环的主要内容,如果未能解决你的问题,请参考以下文章

使用带有样式组件和主题的 react-test-renderer (React Native)

[react]render的执行过程

「React Native」子组件Render中props为空报错问题

REACT NATIVE 系列教程之四刷新组件RENDER(重新渲染)的三种方式详解

react native 中的 async 关键字和 render() 是啥?它实际上是做啥的

react native 踩坑之 SectionList state更新 不执行render重新渲染页面