Question

我是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>上，但是我不确定其期望使用哪种类型？

当我调用Web服务时，它将返回：

{“用户”：[{“ _ id”：“ 5d0fcd8fe1dbfd7c23424e09”，“标题”：“ 180710”，“类型”：1，“已发布”：“ 5”}，{“ _ id”：“ 5d0fcd8fe1dbfd7c23424e0a”， “ title”：“ 180705”，“ type”：3，“ publiched”：“ 5”}，{“ _ id”：“ 5d0fcd8fe1dbfd7c23424e0b”，“ title”：“先生 Nick“，” type“：2，” publiched“：” 5“}]}

亲切的问候。

Answer 1

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

改为更新componentDidmount：

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

元素类型无效：预期为带有FlatList的字符串

1 个答案: