React-Native - 无法读取未定义的属性“cloneWithRowsAndSections”答案

【问题标题】：React-Native - Cannot read property "cloneWithRowsAndSections" of undefinedReact-Native - 无法读取未定义的属性“cloneWithRowsAndSections”
【发布时间】：2016-12-09 15:42:13
【问题描述】：

我正在做一个简单的ListView 与本教程一样的部分标题：

https://medium.com/@darylrowland/reactnative-listview-with-section-headers-99a6714282c3#.627c88ikm

当ListView 使用它的datasource 时，我被困了好几天。

类的constructor和作为数据源的json对象：

    export class ProductListScreen extends Component {
  constructor(props) {
    super(props)

var ds = new ListView.DataSource({

  rowHasChanged: (r1, r2) => r1 !== r2,
  sectionHeaderHasChanged: (s1, s2) => s1 !== s2
})
    this.state = {
      location: {
          products: [
            {
              name: "Paprika baburaw",
              class: "3",
              price: "20",
              measure_unit: "7",
            },
            {
              name: "Paprika babura",
              class: "3",
              price: "20",
              measure_unit: "7",
            },
            {
              name: "Paprika  2",
              class: "3",
              price: "20",
              measure_unit: "7",
            },
            {
              name: "meso 2",
              class: "1",
              price: "20",
              measure_unit: "7",
            },
            {
              name: "meso 2",
              class: "1",
              price: "20",
              measure_unit: "7",
            },
            {
              name: "sir",
              class: "4",
              price: "20",
              measure_unit: "7",
            },
          ],
          vendor: {
                name: "OPG xy",
                adress: "Mije Stuparica 4",
                e_mail: "wololo@gmail.com",
                telephone: "0922423425",
          }
        },
      }

  }

我在渲染中的ListView 是这样定义的（将sortProducts() 视为datasource）：

          <ListView
      dataSource={this.sortProducts()}
      renderRow={this.renderRow}
      renderSectionHeader={this.renderSectionHeader}
      renderSeparator={(sectionID, rowID) => <View key={rowID}/>}/>

而且行和节的渲染方法也很实用。

功能：

  sortProducts() {
    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2
    })
    var productClassMap = {}
      this.state.location.products.forEach( function (productItem) {
        if(!productClassMap[productItem.class]) {
          productClassMap[productItem.class] = []
        }
      productClassMap[productItem.class].push(productItem)
    })
  this.setState({
    dataSource: this.state.ds.cloneWithRowsAndSections(productClassMap)
  })
  return productClassMap
  }

因此该函数翻转对象并使product 的class 元素成为对象的键，该键应用作SectionHeader（此对象中的1、3 和4）。

问题出在我尝试在函数末尾设置状态时，并在此问题的标题中给出错误。

        dataSource: this.state.ds.cloneWithRowsAndSections(productClassMap)

我猜该错误与ListView 的其余部分没有太多共同之处，但我已将所有内容都放在这里以便上下文清晰。

我做错了什么？几天来我一直在努力。任何指示和建议都非常感谢。

【问题讨论】：

标签： android json listview react-native datasource

【解决方案1】：

你没有在任何地方初始化ds，因此你使用它时它是未定义的。

在您的sortProducts() 中，更改 dataSource: this.state.ds.cloneWithRowsAndSections(productClassMap) 到 dataSource: ds.cloneWithRowsAndSections(productClassMap)

由于变量ds在函数之前被初始化，这应该可以正常工作。

【讨论】：