React固定數據表：未捕獲TypeError：this._dataList.getSize不是函數

我試圖使用React開發人員使用this example爲表進行搜索過濾。React固定數據表：未捕獲TypeError：this._dataList.getSize不是函數

我有這張表可以很好地處理我後端數據的靜態數據。我已經拿出了一個「樣本」數據的數組來獲得搜索功能。但是我正在困難的時間圍繞他們如何使用「假數據」來填充他們的表格，如seen here，與「正好」用我想要的測試數組填充相反。

這是我的源代碼。我想通過「firstName」列進行篩選，就像在Facebook的例子中一樣（爲了簡單起見）。該錯誤源於調用getSize（）時的情況......但我懷疑這個問題是另一回事。

class DataListWrapper { 
    constructor(indexMap, data) { 
     this._indexMap = indexMap; 
     this._data = data; 
    } 

    getSize() { 
     return this._indexMap.length; 
    } 

    getObjectAt(index) { 
     return this._data.getObjectAt(
      this._indexMap[index], 
     ); 
    } 
} 

class NameTable extends React.Component { 
    constructor(props) { 
     super(props); 

     this.testDataArr = []; // An array. 
     this._dataList = this.testDataArr; 

     console.log(JSON.stringify(this._dataList)); // It prints the array correctly. 


     this.state = { 
      filteredDataList: new DataListWrapper([], this._dataList) 
     }; 

     this._onFilterChange = this._onFilterChange.bind(this); 
    } 

    _onFilterChange(e) { 
     if (!e.target.value) { 
      this.setState({ 
       filteredDataList: this._dataList, 
      }); 
     } 

     var filterBy = e.target.value; 
     var size = this._dataList.getSize(); 
     var filteredIndexes = []; 
     for (var index = 0; index < size; index++) { 
      var {firstName} = this._dataList.getObjectAt(index); 
      if (firstName.indexOf(filterBy) !== -1) { 
       filteredIndexes.push(index); 
      } 
     } 

     this.setState({ 
      filteredDataList: new DataListWrapper(filteredIndexes, this._dataList), 
     }); 
    } 

    render() { 

     var filteredDataList = this.state.filteredDataList; 


     if (!filteredDataList) { 
      return <div>Loading table.. </div>; 
     } 

     var rowsCount = filteredDataList.getSize(); 



     return (
      <div> 
       <input onChange={this._onFilterChange} type="text" placeholder='Search for first name.. ' /> 
       {/*A table goes here, which renders fine normally without the search filter. */} 
      </div> 
     ); 
    } 
} 

export default NameTable

來源

2017-02-22 cbll

很抱歉告訴你，但你做錯了。首先，當你可以將它存儲在你的課堂上時，將對象存儲在狀態是非常糟糕的。你應該存儲你的狀態：dataListLoaded。當你的datalist被加載時，你必須建立一個setState（dataListLoaded：true）來重組你的組件。 – Kornflexx

夠公平的，我對React和前端的東西比較陌生。如果你能提供你提到的東西的代碼示例，我很樂意去測試它。 – cbll

要找到在es6和反應中編碼的好方法，我看看這個：https://github.com/ryanmcdermott/clean-code-javascript和一些好的庫的源代碼，比如材料-ii – Kornflexx

您的問題是_onFilterChange方法。

你這樣做：

var size = this._dataList.getSize();

this._dataList只是一個數組，這就是爲什麼的getSize（）不會在該對象存在。

如果我不misundertanding你應該這樣做：

var size = this.state.filteredDataList.getSize();

同樣會happend內循環，你這樣做：

var {firstName} = this._dataList.getObjectAt(index);

時，你應該這樣做：

var {firstName} = this.state.filteredDataList.getObjectAt(index);

您的_onFilterChange方法應該如下所示：

_onFilterChange(e) { 
    if (!e.target.value) { 
     this.setState({ 
     filteredDataList: this._dataList, 
     }); 
    } 

    var filterBy = e.target.value; 
    //var size = this._dataList.getSize(); 
    var size = this.state.filteredDataList.getSize(); 
    var filteredIndexes = []; 
    for (var index = 0; index < size; index++) { 
     //var {firstName} = this._dataList.getObjectAt(index); 
     var {firstName} = this.state.filteredDataList.getObjectAt(index); 
     if (firstName.indexOf(filterBy) !== -1) { 
     filteredIndexes.push(index); 
     } 
    } 

    this.setState({ 
     filteredDataList: new DataListWrapper(filteredIndexes, this._dataList), 
    }); 
}

來源

2017-02-22 14:08:26

只能在實現這些方法的數據對象（如DataListWrapper對象）上調用getSize（）和getObjectAt（）。

如果您將一個普通的數據數組傳遞給render（），那麼它不會提供getSize（）和getElementAt（）方法，並且對這些方法的調用將失敗。

由於FakeObjectDataListStore數據是實現getSize和getObjectAt方法的對象（'FakeObjectDataListStore'），原始演示的工作原理如下。

所以最簡單的集成是確保傳入的數據是提供這些方法的對象。在我的例子/ FilterExample中，我發現最簡單的集成（在與許多不好的集成之間掙扎之後）是將現有的'helpers/FakeObjectDataListStore.js'變成我自己的助手/ ObjectDataListStore.js（或者選擇你的名字）從而保留了整個設計中現有的方法包裝結構和尺寸參數。然後，我簡單地將調用替換爲「假」組件，並引用了我自己的未包裝的本地列表行數組。您可以安排您的本地數據是靜態的，或者從您使用的任何數據庫環境動態加載。然後很容易修改_setFiltered（）方法來過濾「firstName」以外的內容。

固定數據表的很酷的事情是它能夠瀏覽大型列表，，並且開發人員可以編寫自己的自定義單元格渲染器，例如在列表行中的任何位置顯示進度條，按鈕或菜單。

來源

2017-06-09 12:11:51

React固定數據表：未捕獲TypeError：this._dataList.getSize不是函數

回答

相關問題