Question

我试图遍历一个简单的对象数组并在Text标签内显示内容。循环已完成，但实际内容未显示在屏幕上。

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

export default class App extends React.Component {

  render() {
      const initialArr = [
        {
          id: 1,
          color: "blue",
          text: "text1"
        },
        {
          id: 2,
          color: "red",
          text: "text2"
        },
        {
          id: 3,
          color: "green",
          text: "text3"
        }
      ];
    return (
      <View style={styles.container}>
        {initialArr.map((prop, key) => {
        return (
          <Text key={key}>{prop[1]}</Text>
        );
     })}
      </View>
    );
  }
}

Answer 1

render() {
  const initialArr = [
    { id: 1, color: "blue", text: "text1" },
    { id: 2, color: "red", text: "text2" },
    { id: 3, color: "green", text: "text3"}
  ];

  var textInputComponents = initialArr.map((prop, key) => {
    return (
      <Text key={key}>{prop.text}</Text>
    );
  })

  return (
  <View style={styles.container}>
    {textInputComponents}
  </View>
  );
}

除了John_mc的答案以外，您还可以拆分映射操作，以提高可读性和可维护性，而不是使用内联映射

通过对象数组进行本机映射给出空白值

1 个答案: