Open xzblog opened 5 years ago
以下是我的问题, 请各位大神指教一下:
我需要在子组件中更改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 的值,并且让他立即显示出效果。
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> ) } }
把 order 从state 里面拿出来 或者 直接 setstate 更新 order
以下是我的问题, 请各位大神指教一下:
我需要在子组件中更改SortableListView的属性 data 的值,但是更改之后值是变了, 列表却没有触发重新渲染。
data 对象是这样的
tagList[xx].status
表示的是一个开关,我需要在后续的业务代码中更改status
的值,并且让他立即显示出效果。父组件是这样的
子组件