0

我是 react-native 的新手，正在玩 UI Kitten ( https://akveo.github.io/react-native-ui-kitten/ ) 它有一个默认的 ChatListScreenBase 来呈现一个列表。它看起来像这样：

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  ListView
} from 'react-native';


import ThemeService from '../util/ThemeService';
import api from '../util/ApiMock';

export default class ChatListScreenBase extends Component {

  constructor(props) {
    super(props);
    let ds = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    let data = api.getUserMsgList(api.userId);

    this.state = {
      dataSource: ds.cloneWithRows(data)
    };
  }

  render() {
     let Header = ThemeService.getChatListHeaderComponent();
    return (
      <View style={styles.container}>
        <Header/>
        <ListView
          style={styles.list}
          automaticallyAdjustContentInsets={false}
          dataSource={this.state.dataSource}
          renderRow={(row) => this._renderMsgItem(row)}
        />
      </View>
    )
  }

  _renderMsgItem(msg) {
    let user = api.getUserInfo(msg.from);
    let ChatItem = ThemeService.getChatItemComponent();
    msg.text = msg.text.length > 25 ? msg.text.substring(0,23)+'...' : msg.text;
    return (
      <ChatItem
        user={user}
        message={msg}
        onClick={(user) => this._openChat(user)}
      />
    );
  }

  _openChat(user) {
    this.props.navigator.push({
      screen: ThemeService.getChatScreen(true),
      passProps: {
        userId: user.id
      }
    });
  }
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
  },
  list: {
    paddingTop: 10
  },
});

我想用我自己的代码替换这个屏幕呈现的数据，如下所示：

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

import ajax from '../util/ApiMock';

export class ChatListScreenBase extends Component {
  constructor(props) {
    super(props);
    this.state = {
      themeIndex: ThemeService.getCurrentThemeIndex()
    }
  }

  state = {
    data: []
  }

  async componentDidMount() {
    const data = await ajax.getDataTest();
    this.setState({data});
  }


  render() {
    return (
      <View style={styles.container} >
        <Text style={styles.h2text}>
          Black Order
        </Text>
          <FlatList
          data={this.state.data}
          showsVerticalScrollIndicator={false}
          renderItem={({item}) =>
          <View style={styles.flatview}>
            <Text style={styles.name}>{item.title}</Text>
          </View>
          }
          keyExtractor={item => item.title}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  h2text: {
    marginTop: 10,
    fontFamily: 'Helvetica',
    fontSize: 36,
    fontWeight: 'bold',
  },
  flatview: {
    justifyContent: 'center',
    paddingTop: 30,
    borderRadius: 2,
  },
  name: {
    fontFamily: 'Verdana',
    fontSize: 18
  },
  email: {
    color: 'red'
  }
});

当我这样做时，我不断收到此错误：

“元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。检查渲染方法ChatListScreenBase。”

我认为问题在于<FlatList>，但我不确定它期望什么类型？

当我调用网络服务时，它返回：

{"users":[{"_id":"5d0fcd8fe1dbfd7c23424e09","title":"180710","type":1,"published":"5"},{"_id":"5d0fcd8fe1dbfd7c23424e0a","title" :"180705","type":3,"publiched":"5"},{"_id":"5d0fcd8fe1dbfd7c23424e0b","title":"尼克先生","type":2,"publiched":" 5"}]}

亲切的问候。

4

1 回答 1

0

对于 API 响应的外观，您将其设置data为具有关键用户的对象，然后尝试对其进行循环。

而是更新componentDidmount：

 async componentDidMount() {
    const resp = await ajax.getDataTest();
    this.setState({ data: resp.users });
  }
于 2019-09-02T08:38:53.797 回答