Question

我在本教程中使用节标题做了一个简单的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
  }

因此，该函数会使对象翻滚，并使class对象的product元素成为SectionHeader的对象（{1}}（此对象中的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 - 无法读取属性＆＃34; cloneWithRowsAndSections＆＃34;未定义的

1 个答案: