具有动态对象问题的ListView [英] ListView with a dynamic object issue

问题描述

我正在重写此问题，希望可以解决此问题.

I am rewriting this question with the hopes that I can have this issue resolved.

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

I believe my overall issue is my lack of understanding of state and updating state.

我的总体目标是让自己添加英语和日语单词，然后能够以很棒的样式在列表视图中查看它们.我的IninitialState看起来像这样:

My overall goal is to have myself add English and Japanese words and be then be able to view them in a list view with awesome styles. My IninitialState looks like this:

 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([])




       })

    }

我将dataSource设置为一个空数组，因为当应用程序最初打开时，将没有保存的数据.至少现在(是.

I set dataSource to an empty array as when the application initially opens there will be no saved data. At least for now.

我的渲染函数如下:

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

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

难题的最后一部分是我实际上在用户输入中添加单词的地方.这是我的功能:

The very last piece of the puzzle is where I actually add the words from the user-input. Here is my function:

addWords(){


         let newArr = this.state.EnglishWordArr.concat({EnglishWord:this.state.EnglishWord,JapaneseWord:this.state.JapaneseWord});


         this.setState({EnglishWordArr:newArr})

         this.forceUpdate();

         console.log(this.state.EnglishWordArr);
        this.setState({showWordList:true});
        dismissKeyboard();
        this.setState({JapaneseWord:''})
         this.setState({EnglishWord:''})
          this.setState({
                 dataSource:this.loadData()
               });




    }

我面临的问题是我应该在哪里更新状态以指示对dataSource已更新的反应?再次，这是我的第一个反应项目.

The problem I am facing is where do I update the state to indicate to react that dataSource has been updated? Again, this is my first project ever in react.

预先感谢.

推荐答案

首先，您可以发布整个渲染函数吗?...，因为它应始终返回某些组件，而提供的代码本身并非如此.

First, could you post your entire render function ?... as it should always return some component and the supplied code does not by itself.

当您说"DataSource除预填充的阵列之外，否则它会对我大吼大叫"时，您似乎理解了您的问题.在您的代码中，您实际上是在给数据源一个null或nil值，这与为其提供一个数组甚至一个空数组(即[])是不同的.简而言之，将第一部分中的代码更改为以下内容:

You appear to understand your issue when you say "DataSource excepts a pre-populated array or it will yell at me." In your code, you are literally giving data source a null or nil value which is different than giving it an array or even an empty array, namely []. In short, change your code in the first part to the following:

 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([]),              
   })

},

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

In this, you are giving data source an empty array and telling it to reload the data for each row when that row and the new value are different.

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

Additionally, in your ListView component which I assume is declared in your render function, set enableEmptySections prop = false to remove any warnings.

因此正在渲染...

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

这篇关于具有动态对象问题的ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！