React Native中ListView DataSource存入state后无法显示数据求助

嘿，我看到你遇到的问题了——这个错误其实很常见，是个小小的语法误用导致的！咱们来一步步拆解：

错误核心原因 #

你报错里的_this.state({...})是问题关键：this.state是组件的状态对象，不是一个可调用的函数，不能直接像执行方法那样传入参数。要更新组件状态并触发重新渲染，必须使用React提供的this.setState()方法。

正确的实现方式 #

下面是把DataSource存入state并正常渲染的完整步骤：

1. 在构造函数中初始化state

组件挂载时，直接在构造函数里创建DataSource并初始化到state中：

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

class ServiceListView extends Component {
  constructor(props) {
    super(props);
    // 创建DataSource实例并克隆初始数据
    const dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2 // 用来判断行数据是否更新的核心函数
    }).cloneWithRows(this.props.services);
    
    // 初始化组件状态
    this.state = {
      dataSource: dataSource
    };
  }

2. 监听props变化更新state（可选）

如果你的props.services是动态变化的（比如从接口异步获取数据后更新），需要在props变化时同步更新state里的DataSource，这时可以用componentDidUpdate生命周期钩子：

componentDidUpdate(prevProps) {
    // 仅当services真正发生变化时才更新数据源
    if (prevProps.services !== this.props.services) {
      const newDataSource = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
      }).cloneWithRows(this.props.services);
      
      // 用setState更新状态，触发组件重新渲染
      this.setState({
        dataSource: newDataSource
      });
    }
  }

3. 渲染ListView

最后在render方法里，直接从state中取dataSource传给ListView：

renderRow = (service) => {
    // 自定义每行的渲染内容
    return (
      <View style={{ padding: 15, borderBottomWidth: 1, borderColor: '#f0f0f0' }}>
        <Text>{service.name}</Text>
        {/* 其他需要展示的service字段 */}
      </View>
    );
  };

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
      />
    );
  }
}

export default ServiceListView;

额外实用提醒 #

另外要注意：ListView在React Native 0.43版本之后已经被官方废弃，推荐使用FlatList或SectionList替代，它们性能更优、API更简洁。如果是新项目，建议直接迁移到FlatList，用法会简单很多：

<FlatList
  data={this.props.services}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => <Text>{item.name}</Text>}
/>

内容的提问来源于stack exchange，提问作者Anjali