搜索
搜索

TypeError：使用FlatList替换ListView时，undefined不是对象（评估'_this2.state.dataSource.cloneWithRows'）

Guesswho321 发表于 Dev
9
Guesswho321

我正在将一个项目更新为从50〜到本机62+，并且ListView已从react-native删除，因此我试图将此文件中的ListView更改为FlatList。我不知道如何处理数据源才能正确管理数据。有人可以帮我升级此文件吗？

这是使用ListView的原始代码，没有进行任何升级尝试，它给出了“不变错误：ListView已从React-Native中删除” ：（我下面的尝试代码）

'use strict';

import React, { Component } from 'react';
import {
  ListView,
  Platform,
  StyleSheet,
  Text,
  Image,
  View,
  TouchableOpacity,
  TouchableHighlight,
  TouchableNativeFeedback,
} from 'react-native';

import PoplarEnv from '../util/PoplarEnv';
import CommentCell from './CommentCell';
import {getCommentsOfObject} from '../api/CommentAPI';
import URLConf from '../api/URLConf';

const avatar_thumbnail = '?imageView2/1/w/48/h/48';

export default class CommentList extends Component{
  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
      replyModalVisible: false,
      commentsArray: [],
      commentCounter: this.props.commentCounter,
      commented: this.props.commented,
      limit: this.props.limit, //评论显示行数

      comment: null,
      commentBarVisible: false,
    };
  }

  componentDidMount() {
    this.fetchData();

  }

  /*
    被评论的feed类型
  */
  getCommentObjType(type) {
    var type_str = '';
    switch (type) {
      case PoplarEnv.COMMENT_OBJ_TYPE.POST:
        type_str = 'post';
        break;
      case PoplarEnv.COMMENT_OBJ_TYPE.PHOTO:
        type_str = 'photo';
        break;
      case PoplarEnv.COMMENT_OBJ_TYPE.ALBUM:
        type_str = 'album';
        break;
      case PoplarEnv.COMMENT_OBJ_TYPE.SPOST:
        type_str = 'spost';
        break;
      default:
        type_str = '';

    }
    return type_str;
  }

  fetchData() {
    var type_str = this.getCommentObjType(this.props.object_type);
    getCommentsOfObject(type_str, this.props.object_id,this.state.limit, (result, comments) => {
      this.setState({
        commentsArray: comments,
        dataSource: this.state.dataSource.cloneWithRows(comments),
        loaded: true,
      });
    });
  }

  renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Loading...
        </Text>
      </View>

    );
  }


  setReplyModalVisible() {
    this.setState({replyModalVisible: true});
  }

  setReplyModalInVisible() {
    this.setState({replyModalVisible: false});
  }

  addNewComment(comment) {
    console.log('add new comment to comments list');
    console.log(comment);
    var commentsArray = this.state.commentsArray;
    commentsArray.push(comment);

    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(commentsArray),
    });

  }

  componentWillReceiveProps(nextProps) {

    if(this.props.commentCounter == nextProps.commentCounter) return;

    if(nextProps.newComment != undefined && nextProps.newComment != null) {
        this.addNewComment(nextProps.newComment);
    }
  }

  render() {
    if(!this.state.loaded) {
      return this.renderLoadingView();
    }
    return this.renderCommentList(this.props.commentCounter);
  }


  showCommentBar() {
    this.setState({
      commentBarVisible: true,
    });
  }

  hideCommentBar() {
    this.setState({
      isComment: false,
      commentBarVisible: false,
    });
  }


  renderCommentList(commentCounter) {

    if(commentCounter > 0) {
      return (
        <TouchableOpacity style={styles.commentList} onPress={this.props.nav2FeedDetail}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(comment)=>this.renderRow(comment, this.props.caller)}
          />
        </TouchableOpacity>
      );
    } else {
      return (<View/>);
    }

  }

  renderAuthorName(comment) {
    if(comment.comment_parent_author_name != undefined && comment.comment_parent_author_name != null) {
      return (<View style={{flex: 1, flexDirection: 'row'}}>
                <Text style={styles.username}>{comment.comment_author_name}</Text>
                <Text style={{fontSize: 14, color: '#9B9B9B', bottom: 1}}> Reply </Text>
                <Text style={styles.username}>{comment.comment_parent_author_name}</Text>
              </View>
            );
    } else {
      return (<Text style={styles.username}>{comment.comment_author_name}</Text>);
    }

  }

  renderRow(comment, caller) {
    if(comment == null || comment == undefined) {
      return (<View />);
    } else {
      if(caller == 'FeedCell') {
        return(
              <View style={styles.commentBox}>
                <Image style={styles.avatar} source={{uri:URLConf.IMG_BASE_URL+comment.comment_author_avatar+avatar_thumbnail}} />
                <View style={{flex:1}}>
                    {this.renderAuthorName(comment)}
                    <Text style={styles.comment}>{comment.comment_content}</Text>
                </View>
              </View>
        );
      } else if(caller == 'FeedDetail') {
        return(
          <CommentCell comment={comment} reply={this.props.reply}/>
        );
      }
    }
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  commentList: {
    marginTop: -10,
    marginLeft:8,
    marginRight:8,
    paddingTop: 0,
  },
  commentBox: {
    flex: 1,
    flexDirection: 'row',
    //borderColor: 'black',
    //borderWidth: 1,
    padding: 10,
    paddingBottom: 4,
  },
  avatar: {
    borderRadius: 16,
    width: 32,
    height: 32,
    marginRight: 10,
  },
  username: {
    fontSize: 14,
    fontWeight: 'bold',
    color: 'black',
    // lineHeight: 13,
    marginBottom: 4,
  },
  commentTime: {

  },
  comment: {
    fontSize: 14,
    color: '#030303',
    lineHeight: 18,
  },
});

module.exports = CommentList;

这是我尝试对其进行升级的代码，但我在第78行“数据源：this.state.dataSource.cloneWithRows”中收到此错误“ TypeError：undefined不是对象（正在评估'_this2.state.dataSource.cloneWithRows'）” （评论），”

'use strict';

import React, { Component } from 'react';
import {
  FlatList,
  //ListView,
  Platform,
  StyleSheet,
  Text,
  Image,
  View,
  TouchableOpacity,
  TouchableHighlight,
  TouchableNativeFeedback,
} from 'react-native';

import PoplarEnv from '../util/PoplarEnv';
import CommentCell from './CommentCell';
import {getCommentsOfObject} from '../api/CommentAPI';
import URLConf from '../api/URLConf';

const avatar_thumbnail = '?imageView2/1/w/48/h/48';

export default class CommentList extends Component{
  constructor(props) {
    super(props);
    this.state = {
      // dataSource: new ListView.DataSource({
      //   rowHasChanged: (row1, row2) => row1 !== row2,
      // }),
      loaded: false,
      replyModalVisible: false,
      commentsArray: [],
      commentCounter: this.props.commentCounter,
      commented: this.props.commented,
      limit: this.props.limit, //评论显示行数

      comment: null,
      commentBarVisible: false,
    };
  }

  componentDidMount() {
    this.fetchData();

  }

  /*
    被评论的feed类型
  */
  getCommentObjType(type) {
    var type_str = '';
    switch (type) {
      case PoplarEnv.COMMENT_OBJ_TYPE.POST:
        type_str = 'post';
        break;
      case PoplarEnv.COMMENT_OBJ_TYPE.PHOTO:
        type_str = 'photo';
        break;
      case PoplarEnv.COMMENT_OBJ_TYPE.ALBUM:
        type_str = 'album';
        break;
      case PoplarEnv.COMMENT_OBJ_TYPE.SPOST:
        type_str = 'spost';
        break;
      default:
        type_str = '';

    }
    return type_str;
  }

  fetchData() {
    var type_str = this.getCommentObjType(this.props.object_type);
    getCommentsOfObject(type_str, this.props.object_id,this.state.limit, (result, comments) => {
      this.setState({
        commentsArray: comments,
        dataSource: this.state.dataSource.cloneWithRows(comments),
        loaded: true,
      });
    });
  }

  renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Loading...
        </Text>
      </View>

    );
  }


  setReplyModalVisible() {
    this.setState({replyModalVisible: true});
  }

  setReplyModalInVisible() {
    this.setState({replyModalVisible: false});
  }

  addNewComment(comment) {
    console.log('add new comment to comments list');
    console.log(comment);
    var commentsArray = this.state.commentsArray;
    commentsArray.push(comment);

    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(commentsArray),
    });

  }

  componentWillReceiveProps(nextProps) {

    if(this.props.commentCounter == nextProps.commentCounter) return;

    if(nextProps.newComment != undefined && nextProps.newComment != null) {
        this.addNewComment(nextProps.newComment);
    }
  }

  render() {
    if(!this.state.loaded) {
      return this.renderLoadingView();
    }
    return this.renderCommentList(this.props.commentCounter);
  }


  showCommentBar() {
    this.setState({
      commentBarVisible: true,
    });
  }

  hideCommentBar() {
    this.setState({
      isComment: false,
      commentBarVisible: false,
    });
  }


  renderCommentList(commentCounter) {

    if(commentCounter > 0) {
      return (
        <TouchableOpacity style={styles.commentList} onPress={this.props.nav2FeedDetail}>
          <FlatList
            data={this.state.dataSource}
            extraData={this.state}
            renderItem={(comment)=>this.renderRow(comment, this.props.caller)}
          />
          {/* <ListView
            dataSource={this.state.dataSource}
            renderRow={(comment)=>this.renderRow(comment, this.props.caller)}
          /> */}
        </TouchableOpacity>
      );
    } else {
      return (<View/>);
    }

  }

  renderAuthorName(comment) {
    if(comment.comment_parent_author_name != undefined && comment.comment_parent_author_name != null) {
      return (<View style={{flex: 1, flexDirection: 'row'}}>
                <Text style={styles.username}>{comment.comment_author_name}</Text>
                <Text style={{fontSize: 14, color: '#9B9B9B', bottom: 1}}> Reply </Text>
                <Text style={styles.username}>{comment.comment_parent_author_name}</Text>
              </View>
            );
    } else {
      return (<Text style={styles.username}>{comment.comment_author_name}</Text>);
    }

  }

  renderRow(comment, caller) {
    if(comment == null || comment == undefined) {
      return (<View />);
    } else {
      if(caller == 'FeedCell') {
        return(
              <View style={styles.commentBox}>
                <Image style={styles.avatar} source={{uri:URLConf.IMG_BASE_URL+comment.comment_author_avatar+avatar_thumbnail}} />
                <View style={{flex:1}}>
                    {this.renderAuthorName(comment)}
                    <Text style={styles.comment}>{comment.comment_content}</Text>
                </View>
              </View>
        );
      } else if(caller == 'FeedDetail') {
        return(
          <CommentCell comment={comment} reply={this.props.reply}/>
        );
      }
    }
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  commentList: {
    marginTop: -10,
    marginLeft:8,
    marginRight:8,
    paddingTop: 0,
  },
  commentBox: {
    flex: 1,
    flexDirection: 'row',
    //borderColor: 'black',
    //borderWidth: 1,
    padding: 10,
    paddingBottom: 4,
  },
  avatar: {
    borderRadius: 16,
    width: 32,
    height: 32,
    marginRight: 10,
  },
  username: {
    fontSize: 14,
    fontWeight: 'bold',
    color: 'black',
    // lineHeight: 13,
    marginBottom: 4,
  },
  commentTime: {

  },
  comment: {
    fontSize: 14,
    color: '#030303',
    lineHeight: 18,
  },
});

module.exports = CommentList;

如果您还需要其他代码，例如CommentCell或FeedCell，请告诉我，我将编辑帖子以添加代码。有人可以帮我这个忙吗，我已经花了几个小时了。

基尚·哈达

您必须完全更改ListView为Flatlist。

因此，首先Flatlist要从中导入react-native：

import { FlatList } from "react-native";

然后换ListView到Flatlist如下：

renderCommentList(commentCounter) {
  if(commentCounter > 0) {
    return (
      <TouchableOpacity style={styles.commentList} onPress={this.props.nav2FeedDetail}>
        <FlatList
          data={this.state.dataSource}
          extraData={this.state}
          renderItem={({ item })=>this.renderRow(item, this.props.caller)}
        />
      </TouchableOpacity>
    );
  } else {
    return (<View/>);
  }
}

您可以在此处找到更多文档

更新资料

您的dataSource状态变量应为简单数组，例如：

this.state = {
  dataSource: []
}

然后，当您获取数据时，将数据追加到dataSource状态变量中，如下所示：

this.setState({
  commentsArray: comments,
  dataSource: comments,
  loaded: true,
});

**注意：**您的renderItems方法应如下：

renderItem={({ comment })=>this.renderRow(comment, this.props.caller)}

comment 应该放在{}中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档