Hàng ListView gốc phản hồi không hiển thị lại sau khi thay đổi trạng thái

Question

Chế độ xem danh sách gốc phản hồi: Hàng không hiển thị lại sau khi trạng thái nguồn dữ liệu đã thay đổi.

Đây là một phiên bản đơn giản của mã của tôi:

render(): { 
    return <ListView 
    dataSource={this.state.DS} 
    renderRow={this.renderRow}/> 
} 

renderRow(item): { 
    return <TouchableOpacity onPress={() => this.handlePress(item)}> 
    {this.renderButton(item.prop1)} 
    </TouchableOpacity> 
} 

renderButton(prop1): { 
    if (prop1 == true) { 
    return <Text> Active </Text> 
    } else { 
    return <Text> Inactive </Text> 
    } 
} 

handlePress(item): { 
    **Change the prop1 of *item* in an array (clone of dataSource), then** 
    this.setState({ 
    DS: this.state.DS.cloneWithRows(arrayFromAbove) 
    }) 
} 

Theo ví dụ của Facebook, ListView được coi rerender mọi nguồn dữ liệu thời gian được thay đổi. Có phải vì tôi chỉ thay đổi thuộc tính của một mục trong nguồn dữ liệu? Có vẻ như hàm renderRow không hiển thị lại, nhưng hàm render() là từ thay đổi nguồn dữ liệu.

Cảm ơn bạn.

Answer 1

Trước tiên, bạn cần đặt datasource trong hàm getInitialState. Sau đó, thay đổi nguồn dữ liệu bằng cách gọi this.setState({}) và chuyển qua nguồn dữ liệu mới. Dường như bạn có thể đã đi đúng hướng ở trên, nhưng tôi đã thiết lập một ví dụ làm việc của thay đổi các ListView nguồn dữ liệu here. Tôi hy vọng điều này sẽ giúp

https://rnplay.org/apps/r3bzOQ

Answer 2

phản ứng là đủ thông minh để phát hiện những thay đổi trong nguồn dữ liệu và nếu danh sách cần được tái tạo hình. Nếu bạn muốn cập nhật listView, hãy tạo các đối tượng mới thay vì cập nhật các thuộc tính của các đối tượng hiện có. Mã này sẽ giống như thế này:

let newArray = this._rows.slice(); 
newArray[rowID] = { 
    ...this._rows[rowID], 
    newPropState: true, 
}; 
this._rows = newArray; 

let newDataSource = this.ds.cloneWithRows(newArray); 
this.setState({ 
    dataSource: newDataSource 
}); 

Bạn có thể đọc thêm về tương tự issue on Github