重新加载 ListView 不工作 React Native

Question

重新表述我的问题...（单独测试 class）

我正在尝试在按下按钮时使用随机数组重新加载 listview。但它不起作用！尝试使用以下 LOC 刷新 datasource：

_buttonPressed() {
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(this._randomArray()),
        });
    }

_randomArray() {

    var jsonRes;

    switch(this.getRandomInt()) // number returned is valid. I checked
    {
        case 1:
        {
            jsonRes = '[' +
            '{ "firstName":"Michel" , "lastName":"John" ,"age":18},' +
            '{ "firstName":"Richard" , "lastName":"Joe","age":20 },' +
            '{ "firstName":"James" , "lastName":"Henry","age":15 },' +
            '{ "firstName":"e" , "lastName":"u","age":15 }]';
            break;
        }
        case 2:
        {
            jsonRes = '[' +
            '{ "firstName":"bacde" , "lastName":"John" ,"age":18},' +
            '{ "firstName":"bacde" , "lastName":"Joe","age":20 },' +
            '{ "firstName":"bacde" , "lastName":"Henry","age":15 },' +
            '{ "firstName":"ebacde" , "lastName":"u","age":15 }]';
            break;
        }
        case 3:
        {
            jsonRes = '[' +
            '{ "firstName":"mmmmm" , "lastName":"John" ,"age":18},' +
            '{ "firstName":"mmmmm" , "lastName":"Joe","age":20 },' +
            '{ "firstName":"mmmmm" , "lastName":"Henry","age":15 },' +
            '{ "firstName":"etttttt" , "lastName":"u","age":15 }]';
            break;
        }
        default:
        {
            jsonRes = '[' +
            '{ "firstName":"dddd" , "lastName":"John" ,"age":18},' +
            '{ "firstName":"dddd" , "lastName":"Joe","age":20 },' +
            '{ "firstName":"dddd" , "lastName":"Henry","age":15 },' +
            '{ "firstName":"ehhgh" , "lastName":"u","age":15 }]';
            break;
        }
    }

    var myObject = eval('(' + jsonRes + ')');
    return myObject;

}

我已经看过 React Native 的示例列表视图项目。为此，他们正在使用 dataSource.cloneWithRows。不知道我错过了什么小东西。请帮我解决这个问题...谢谢！

Answer 1

我已经能够成功调试问题。我刚刚打开了 ListViewDataSource.js 的源代码并跟踪了不同函数传递的 datablob 变量值。

一种方法_calculateDirtyArrays 识别哪些行已更改并且需要更新。为此，三个条件之一必须匹配一行。

 ........
    // dirty if the section is new, row is new or _rowHasChanged is true
    dirty =
      !prevSectionsHash[sectionID] ||
      !prevRowsHash[sectionID][rowID] ||
      this._rowHasChanged(
        this._getRowData(prevDataBlob, sectionID, rowID),
        this._getRowData(this._dataBlob, sectionID, rowID)
      );
    this._dirtyRows[sIndex].push(!!dirty);
 ........

_rowHasChanged是传递给List Datasource构造函数的。

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

在我的例子中这是错误的，因为当相应的数据改变时，行应该改变。我根据我的要求更改了上述条件。

var dataSource = new ListView.DataSource(
        {
            rowHasChanged: function(r1, r2) : bool {
                return (
                (r1["firstName"] !== r2["firstName"]) ||
                (r1["lastName"] !== r2["lastName"]) ||
                (r1["age"] !== r2["age"])
                );
            }
        });

瞧！它现在工作完美。希望它对以后的人有所帮助！

重新加载 ListView 不工作 React Native

Reload ListView not Working React Native

listview

datasource

ecmascript-6

react-native