最近在使用ListView 做一个列表全选单选功能其中发现选中列表下改元素但是state没有发生改变,此时发现是组件没有重新渲染 解决方案如下:
import React, { Component } from 'react';
import {
	StyleSheet,
	View,
	TouchableOpacity,
	Dimensions,
	ListView,
	Text,
	Image,
	Platform,
} from 'react-native';

export default class SelectPeople extends React.Component {
	constructor(props) {
			super(props);
	
			let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
			this.state = {
				dataSource: ds.cloneWithRows([]),
				isChecked: false,
				isAllSelect: false,		
				selectMap: new Map(),
				ds: ds //在此处定义ds (具体看官方文档)
			};	
			this.list = [
					{
						employeeId: "66034821",
						name: "黄擎一",
						userId: "66034821",
						selected: false
					},
					{
						employeeId: "6622777",
						name: "赵染",
						userId: "6622777",
						selected: false
					},
					{
						employeeId: "8860833",
						name: "朱琛",
						userId: "8860833",
						selected: false
					}
			]
		}

	componentDidMount() {
		this.setState({
				dataSource: this.state.dataSource.cloneWithRows(this.list)
		})
	}
	
	selectItem = (key, value, isChecked) => {
		在此对数据源重新处理
		let dataList = JSON.parse(JSON.stringify(this.list))
		this.setState({
			dataSource: this.state.dataSource.cloneWithRows(dataList)
		})
	}
	render() {
	
		return (
				<View style={styles.container}>
					<ListView
						renderRow={this.renderRow}  //此处cell
						dataSource={this.state.dataSource}
						enableEmptySections={true}
					>
					</ListView>
				</View>
		);
	}
}



Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐