最近寫項目碰到了列表的多選需求，開始我直接用setState并不會直接起作用，只會在改變的item移出渲染區(qū)然后重新渲染的時候才會有效果，后來查看文檔才發(fā)現(xiàn)有一extraData的參數(shù)。需要設(shè)置才能在setState之后馬上渲染

效果圖.gif

代碼如下

import React, {Component} from 'react';
import {
    Image,
    Text,
    View,
    TouchableHighlight,
    FlatList,
    StyleSheet,
    Button
} from 'react-native';
export default class TestFlatListSelect extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [{
                "id": "0",
                select: false
            },
                {
                    "id": "1",
                    select: false
                },
                {
                    "id": "2",
                    select: false
                },
                {
                    "id": "3",
                    select: true
                },
                {
                    "id": "4",
                    select: true
                },
                {
                    "id": "5",
                    select: true
                }
],//數(shù)據(jù)源
            selectItem: [],
        }
    }

    _itemPress = (item) => {
        console.log(item);
    }
    _selectItemPress = (item) => {
        if (item.select) {
         this.state.selectItem.splice(this.state.selectItem.findIndex(function (x) {
                return x === item.name;
            }))
        } else {
            this.state.selectItem.push(item)
        }
        this.state.data[item.id].select = !item.select
        // this.state.data=arr.pop()
        this.setState({data: this.state.data})
    }

    _submitPress() {
        alert(`選中了${JSON.stringify(this.state.selectItem)}`)
    }
    render() {
        return (
            <FlatList
                keyExtractor={item => item.id}
                data={this.state.data}
                extraData={this.state} //這里是關(guān)鍵，如果不設(shè)置點擊就不會馬上改變狀態(tài)，而需要拖動列表才會改變
                ListHeaderComponent={({item}) => {
                    return (<Button title={"確定"} onPress={_ = () => this._submitPress()}/>)
                }}
                renderItem={({item}) => {
                    return (
                        <TouchableHighlight onPress={ _ => this._itemPress(item)}>
                            <View style={styles.standaloneRowFront}>
                                <Image style={{width: 70, marginLeft: 5, height: 70}}
                                       source={{uri: item.thumb}}>
                                    <TouchableHighlight
                                        onPress={_ => this._selectItemPress(item)}>
                                        <View style={{
                                            width: 80,
                                            height: 80,
                                            backgroundColor: item.select ? ("#ff081f") : ("#39a7fc")
                                        }}/>
                                    </TouchableHighlight>
                                </Image>
                                <View
                                    style={{marginLeft: 20}}>
                                    <Text>{item.select ? ("選中") : ("未選中")}</Text>
                                </View>
                            </View>
                        </TouchableHighlight>)
                }}
            />
        );
    }
}
const styles = StyleSheet.create({
    standaloneRowFront: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#FFF',
        height: 70,
        marginBottom: 5
    },
});```