React-Native

Question

我在本教程的 headers 部分做一个简单的 ListView：

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

当 ListView 使用它的 datasource.

时，我被困了好几天

class 的 constructor 和 json object 是数据的来源：

    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
  }

因此该函数翻转 object 并使 product 的 class 元素成为 object 的键，该键应用作 SectionHeader（ object).

中的 1、3 和 4

问题出在当我试图在一个函数的末尾设置状态时，并在这个问题的标题中给出了错误。

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

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

我做错了什么？我几天都在敲脑袋。非常感谢任何指点和建议。

Answer 1

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

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

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

React-Native - 无法读取未定义的属性 "cloneWithRowsAndSections"

React-Native - Cannot read property "cloneWithRowsAndSections" of undefined

android

json

listview

datasource