Question

我正在尝试使用 .map 显示用户列表，但我在屏幕上看不到任何内容（只是第一条消息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>
    );
  }
}

Answer 1

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>
  );
}

希望这会有所帮助！

React Native不显示array.map详细信息

1 个答案: