代码之家  ›  专栏  ›  技术社区  ›  gon250

react native不显示array.map详细信息

  •  1
  • gon250  · 技术社区  · 5 年前

    我正在尝试显示使用 地图 但是我在屏幕上看不到任何东西( 只是第一条信息Hello React Native )我没有任何错误。我试着在控制台中显示用户列表和相应的用户列表。

    这是密码。

    import React, {Component} from 'react';
    import {View, Text} from 'react-native';
    
    type Props = {};
    export default class App extends Component<Props> {
      constructor(props){
        super(props)
        this.state = {
          users: []
        }
      }
    
      componentWillMount() {
        this.setState({
          users: [{
              name: 'Name 1',
            },
            {
              name: 'Name 2',
            }, {
              name: 'Name 3',
            }
          ]
      })
      }
    
      render() {
        return (
          <View style={{ flex: 1 }}>
            <Text>Hello React Native</Text> 
            {this.state.users.map(user => {
              {console.log(user)} // Displaying the users properly in the console.
              <View>
                <Text>
                  {user.name}
                </Text>
              </View>
            })}
          </View>
        );
      }
    }
    
    1 回复  |  直到 5 年前
        1
  •  1
  •   gon250    5 年前

    这个 return 语句中缺少 .map 函数,你必须添加它

    render() {
      return (
        <View style={{ flex: 1 }}>
          <Text>Hello React Native</Text> 
          {this.state.users.map((user, index)=> {
            {console.log(user)} // Displaying the users properly in the console.
            return (
             <View key={index}>
              <Text>
                {user.name}
              </Text>
             </View>
            )
          })}
        </View>
      );
    }
    

    希望这会有所帮助!