deanmcpherson / react-native-sortable-listview

Drag drop capable wrapper of ListView for React Native

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

更改了SortableListView.data对象的值, 数据改变了,但是没有触发列表的重新渲染

xzblog opened this issue · comments

以下是我的问题, 请各位大神指教一下:

我需要在子组件中更改SortableListView的属性 data 的值,但是更改之后值是变了, 列表却没有触发重新渲染。

  1. 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 的值,并且让他立即显示出效果。

  1. 父组件是这样的
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)}} />}
            />
        )
    }
}
  1. 子组件
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