更改值后,FlatList中的React Native ios Switch不切换

时间:2019-02-19 01:32:30

标签: react-native react-native-ios uiswitch

我正在尝试切换ios切换本机反应。但是,一旦我更改开关,开关就会回到初始位置。

我所拥有的:

class ABC extends Component {
    constructor(props) {
        super(props)
        this.state = {
           obj: []
        }
    }
    fetch(){
    // fetch something from remote server, set it to state object array
    }
    setStatus(id, value){
        var temp = [...this.state.obj]
        temp.map((t) => {
        if (t.id == id) {
            t.flag = value
        }
        })
        this.setState({ obj: temp })
    }
    render() {
        return (
        <View>
            <FlatList
                data={this.state.obj}
                renderItem={({ item }) =>
                    <View>
                        <Text>{item.name}</Text>
                        <Switch
                            onValueChange={(val) => this.setStatus(item.id, val)}
                            value={item.flag}
                        />
                    </View>
                }
                keyExtractor={({ id }, index) => id.toString()}
            />
        </View>
    );
    }
}

我记录了obj状态的前后值,它们似乎在更新。是否应该再次呈现FlatList(如刷新网页)?还是我缺少什么?在SO中搜索了答案,找不到我的错误。

1 个答案:

答案 0 :(得分:3)

Flatlist有一个叫做extraData的道具。

该道具告诉Flatlist是否重新渲染。

如果extraData中的数据发生更改,则根据data道具中提供的新数据重新提交平面列表。

因此,每当您需要重新呈现平面列表时,只需更改extraData中的内容即可。

最好的方法是将状态传递到extraData,然后传递给Data

因此,只需传递extraData={this.state.obj}

还有另一种称为forceUpdate的方式。

您可以致电this.forceUpdate()

,但是不建议这样做,因为这不仅会呈现Flatlist,而且会呈现您要在其中调用的整个组件。