Làm thế nào lực vẽ lại ListView khi this.state thay đổi (nhưng không phải là dataSource).

Question

Tôi đã tạo một thành phần sử dụng ListView để hiển thị danh sách liên hệ. Khi nhấp vào một hàng, tôi cập nhật một mảng trong thành phần của state chứa tất cả các liên hệ đã chọn. Tuy nhiên, tôi không sử dụng mảng này làm dataSource cho thành phần ListView của tôi.

Tôi muốn vẽ lại ListView mỗi khi mảng này được sửa đổi để hiển thị hình ảnh cho các liên hệ đã chọn.

Dưới đây là một ví dụ về tình hình hiện tại của tôi:

renderListView: function(){ 
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this.renderRow} 
     style={styles.listView} 
    /> 
} 
renderRow:function(row){ 
    return if(this.state.something === true) <Text>Something</Text> 
    else <Text>Something Else</Text> 
} 

Tôi cố gắng để gọi .forceUpdate(), nó gọi là render phương pháp nhưng không phải là phương pháp renderRow.

Bất kỳ đề xuất nào?

Answer 1

Tôi vừa gặp vấn đề tương tự. Kiểm tra câu hỏi của tôi ở đây: React Native ListView not updating on data change

Về cơ bản, có vẻ như có lỗi với thành phần ListView và bạn cần phải xây dựng lại từng mục thay đổi trong nguồn dữ liệu cho ListView để vẽ lại.

Dưới đây là một ví dụ làm việc: https://rnplay.org/apps/GWoFWg

Đầu tiên, tạo nguồn dữ liệu và một bản sao của mảng và lưu chúng vào nhà nước. Trong trường hợp của tôi, foods là mảng.

constructor(props){ 
    super(props); 
    var ds = new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => row1 !== row2, 
    }); 
    this.state = { 
     dataSource: ds.cloneWithRows(foods), 
     db: foods, 
    }; 
} 

Khi bạn muốn thay đổi điều gì đó trong nguồn dữ liệu, tạo một bản sao của mảng bạn lưu vào nhà nước, xây dựng lại các mục với sự thay đổi và sau đó lưu các mảng mới với sự thay đổi về trạng thái (cả db và nguồn dữ liệu).

onCollapse(rowID: number) { 
    console.log("rowID", rowID); 
    var newArray = this.state.db.slice(); 
    newArray[rowID] = { 
     key: newArray[rowID].key, 
     details: newArray[rowID].details, 
     isCollapsed: newArray[rowID].isCollapsed == false ? true : false, 
    }; 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(newArray), 
     db: newArray, 
    }); 
}