具有动态对象问题的ListView

我重写这个问题，希望能解决这个问题

我相信我的整体问题是我对状态和更新状态缺乏了解

我的总体目标是让我自己添加英语和日语单词，然后能够在列表视图中以很棒的风格查看它们。我的初始状态如下所示：

 const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

module.exports = React.createClass({
    getInitialState(){
          var  dataSource = new ListView.DataSource({
                    rowHasChanged: (r1, r2) => r1 !== r2,
                    sectionHeaderHasChanged: (s1, s2) => s1 !== s2
                  })
       return({
            option:['Please select an option'],
            menu:['Add Words','View List','DeleteWords','EditWords'],
            showWordList:'',
            wordObj:{EnglishWord:'',Japanese:''},
            JapaneseWord:'',
            EnglishWord:'',
            EnglishWordArr:[],
            showAddWords:'',
            showList:'',
            showMenu:true,
            dataSource: dataSource.cloneWithRowsAndSections([])




       })

    }

      renderRow: function(foodItem) {
    return (
      <Text>{foodItem.JapaneseWord}</Text>
    )
},

renderSectionHeader: function(sectionData, category) {
  return (
    <Text style={{fontWeight: "700"}}>{category}</Text>
  )
},

我将dataSource设置为空数组，因为当应用程序最初打开时，不会保存任何数据。至少现在是这样

我的渲染函数如下所示：

 const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

module.exports = React.createClass({
    getInitialState(){
          var  dataSource = new ListView.DataSource({
                    rowHasChanged: (r1, r2) => r1 !== r2,
                    sectionHeaderHasChanged: (s1, s2) => s1 !== s2
                  })
       return({
            option:['Please select an option'],
            menu:['Add Words','View List','DeleteWords','EditWords'],
            showWordList:'',
            wordObj:{EnglishWord:'',Japanese:''},
            JapaneseWord:'',
            EnglishWord:'',
            EnglishWordArr:[],
            showAddWords:'',
            showList:'',
            showMenu:true,
            dataSource: dataSource.cloneWithRowsAndSections([])




       })

    }

      renderRow: function(foodItem) {
    return (
      <Text>{foodItem.JapaneseWord}</Text>
    )
},

renderSectionHeader: function(sectionData, category) {
  return (
    <Text style={{fontWeight: "700"}}>{category}</Text>
  )
},

我面临的问题是，我在哪里更新状态，以指示对数据源已更新的反应？这是我在react的第一个项目

---

提前谢谢。

首先，你能发布你的整个渲染功能吗？。。。因为它应该总是返回一些组件，而提供的代码本身并不返回

当您说“DataSource排除了预填充的数组，否则它会对我大喊大叫”时，您似乎理解了您的问题。在您的代码中，您实际上是在给数据源一个null或nil值，这与给它一个数组甚至一个空数组不同，即[]。简而言之，将第一部分中的代码更改为以下内容：

 var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

 return({
        option:['Please select an option'],
        menu:['Add Words','View List','DeleteWords','EditWords'],
        showWordList:'',
        wordObj:{EnglishWord:'',JapaneseMeaning:''},
        JapaneseWord:'',
        EnglishWord:'',
        EnglishWordArr:[],
        showAddWords:'',
        showList:'',
        showMenu:true,
        dataSource: ds.cloneWithRows([]),              
   })

},

在这种情况下，您将为数据源提供一个空数组，并告诉它在每行和新值不同时重新加载每行的数据

此外，在我假设在渲染函数中声明的ListView组件中，设置enableEmptySections prop=false以删除任何警告

因此在渲染中

render() {
..
<ListView
.. your props
enableEmptySections={true}
/>
..
}

render（）{
..
..
}

你能给我指一个教程吗。我想我在使用时有点迷路了。似乎大多数教程都解释了如何使用预定义列表呈现列表。关于带有对象的动态数组的文献不多。谢谢。我可以添加一些东西来帮助我获得回复吗？我真的被卡住了。