React Native ios FlatList 中的开关在值更改后不切换

Question

我正在尝试切换 ios Switch in react native。但是我一改变开关就回到初始位置。

我有：

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 寻找答案，找不到我的错误。

Answer 1

Flatlist 有一个名为 extraData 的道具。

这个属性告诉 Flatlist 是否重新渲染。

如果 extraData 中的数据发生变化，则平面列表会根据 data prop.

中提供的新数据重新呈现

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

最好的方法是将状态传递给 extraData，然后再传递给 Data。

所以，只需传递 extraData={this.state.obj}。

还有其他方法叫做 forceUpdate。

你可以打电话给this.forceUpdate().

但不推荐这样做，因为这不仅会呈现平面列表，还会呈现您调用它的整个组件。

React Native ios FlatList 中的开关在值更改后不切换

React Native ios Switch in FlatList not toggling after value changed

uiswitch

react-native

react-native-ios