更改了SortableListView.data对象的值, 数据改变了,但是没有触发列表的重新渲染
xzblog opened this issue · comments
长得丑活得久i commented
以下是我的问题, 请各位大神指教一下:
我需要在子组件中更改SortableListView的属性 data 的值,但是更改之后值是变了, 列表却没有触发重新渲染。
- data 对象是这样的
const tagList = {
Web: { id: '5562b415e4b00c57d9b94ac8', title: '前端', name: 'Web', status: true, order: 1 },
Android: { id: '5562b410e4b00c57d9b94a92', title: 'Android', name: 'Android', status: true, order: 3 }
}
tagList[xx].status
表示的是一个开关,我需要在后续的业务代码中更改 status
的值,并且让他立即显示出效果。
- 父组件是这样的
export default class Tags extends Component{
state = {
tags: tagList,
order: Object.keys(tagList)
};
redrawList = (item, value) => {
const { tags } = this.state;
tags[item.name].status = value;
this.setState({
tags
})
};
render(){
const { tags, order } = this.state;
return(
<SortableListView
style={{ flex: 1 }}
data={tags}
order={order}
onRowMoved={e => {
order.splice(e.to, 0, order.splice(e.from, 1)[0]);
this.forceUpdate()
}}
renderRow={row => <RowComponent data={row} changeTagValue={(item, value)=> {this.redrawList(item, value)}} />}
/>
)
}
}
- 子组件
class RowComponent extends Component{
handleChangeTag = (data, value) => {
this.props.changeTagValue(data, value) // 反向触发伏组件重新渲染列表
};
render(){
const { data } = this.props;
return(
<TouchableOpacity
activeOpacity={theme.activeOpacity}
underlayColor={theme.tintColor}
style={style.rowBox}
{...this.props.sortHandlers}
>
<View style={style.row}>
<Text style={style.title}>{data.title}</Text>
<Switch value={data.status} onValueChange={(value)=>this.handleChangeTag(data, value)} />
</View>
</TouchableOpacity>
)
}
}
樊勇锋 commented
把 order 从state 里面拿出来 或者 直接 setstate 更新 order