单击按钮后 Flatlist 不会立即更新反应本机

Question

我有一些数组示例数据，我想根据选定的条件（状态）过滤平面列表。但是，当我单击按钮但平面列表没有单击时，状态变量会发生变化。我必须第二次点击按钮，平面列表才会改变

我在图片中的情况：

开头(this.state.state = 'All') -> 1st Image
我点击柔佛按钮，this.state.state 变量确实更新为 'Johor' 但 flatlist 没有改变 -> 2nd Image
我再次点击 Melaka 按钮，this.state.state 变量再次更新为 'Melaka' 但平面列表根据 'Johor' 变量更改 -> 3rd Image

下面是我的代码。

import React, { Component } from 'react';
import { Text, StyleSheet, View, TouchableOpacity, FlatList, SafeAreaView, } from 'react-native';

//Render FlatList Item
Healthcare = ({ id, name, state }) => {
    return (
        <View style={[styles.healthcareItemList]}>
            <TouchableOpacity style={[styles.healthcareItemTextView]}>
                <Text style={{ fontSize: 16, lineHeight: 22, color: '#4A4A4A' }}>{name}</Text>
                <Text style={{ fontSize: 12, lineHeight: 16, color: '#4A4A4A' }}>{state}</Text>
            </TouchableOpacity>
        </View >
    );
}

export default class FindHealthcare extends Component {

    constructor(props) {
        super(props);
        this.state = {
            state: 'All',
            healthcare: '',
            healthcareListSearchHolder: [{
                id: '1',
                name: 'Hospital 1',
                state: 'Johor',
            },
            {
                id: '2',
                name: 'Hospital 2',
                state: 'Melaka',
            },
            {
                id: '3',
                name: 'Hospital 3',
                state: 'Kedah',
            }],
            healthcareList: [{
                id: '1',
                name: 'Hospital 1',
                state: 'Johor',
            },
            {
                id: '2',
                name: 'Hospital 2',
                state: 'Melaka',
            },
            {
                id: '3',
                name: 'Hospital 3',
                state: 'Kedah',
            }]

        };
    }

    filterHealthcareState = (state) => {
        this.setState({
            state: state
        });
        const newData = this.state.healthcareListSearchHolder.filter(item => {
            if (this.state.state === item.state || this.state.state == 'All') {
                const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
                const textData = this.state.healthcare.toUpperCase();
                return itemData.indexOf(textData) > -1;
            }
        });

        this.setState({ healthcareList: newData });
    }

    render() {

        return (
            <View style={[styles.container]}>

                <Text>Select Location</Text>
                <TouchableOpacity style={{ backgroundColor: 'yellow' }}
                    onPress={() => this.filterHealthcareState('All')}>
                    <Text>All</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{ backgroundColor: 'yellow' }}
                    onPress={() => this.filterHealthcareState('Johor')}>
                    <Text>Johor</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{ backgroundColor: 'yellow' }}
                    onPress={() => this.filterHealthcareState('Melaka')}>
                    <Text>Melaka</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{ backgroundColor: 'yellow' }}
                    onPress={() => this.filterHealthcareState('Kedah')}>
                    <Text>Kedah</Text>
                </TouchableOpacity>

                <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginVertical: 20, marginHorizontal: 12 }}>
                    <Text style={[{ fontWeight: '600', fontSize: 16, lineHeight: 22, color: '#555555' }]}>Location: </Text>
                    <Text style={[{ fontWeight: '600', fontSize: 16, lineHeight: 22, color: '#000000' }]}>{this.state.state}</Text>
                </View>

                <SafeAreaView style={[styles.healthcareItemListView]}>
                    <FlatList
                        data={this.state.healthcareList}
                        renderItem={({ item }) => <Healthcare id={item.id} name={item.name} state={item.state} />}
                        keyExtractor={item => item.id}
                        extraData={this.state}
                    />
                </SafeAreaView>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'flex-start',
        flex: 1,
        backgroundColor: '#F5F5F5'
    },
    healthcareItemListView: {
        flex: 1,
    },
    healthcareItemList: {
        backgroundColor: '#FFFFFF',
        flexDirection: 'row',
        flex: 1,
        marginVertical: 6,
        marginHorizontal: 12,
        borderTopWidth: 0.5,
        borderLeftWidth: 0.5,
        borderRightWidth: 0.5,
        borderBottomWidth: 0.8
    },
    healthcareItemImage: {
        width: '30%',
        height: 100
    },
    healthcareItemTextView: {
        flex: 1,
        justifyContent: 'space-evenly',
        marginLeft: 15
    }

})

谁能告诉我为什么会这样，解决方法是什么？提前致谢

Answer 1

找到问题了。使用参数state代替this.state.state应该没问题

filterHealthcareState = (state) => {
        this.setState({
            state: state
        });
        const newData = this.state.healthcareListSearchHolder.filter(item => {

            if (state === item.state || state == 'All') {
                const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
                const textData = this.state.healthcare.toUpperCase();
                return itemData.indexOf(textData) > -1;
            }
        });

        this.setState({ healthcareList: newData });
    }

Answer 2

检查下面的代码

import React, { Component } from 'react';
import {
  Text,
  StyleSheet,
  View,
  TouchableOpacity,
  FlatList,
  SafeAreaView,
} from 'react-native';


export default class FindHealthcare extends Component {
  constructor(props) {
    super(props);
    this.state = {
      state: 'All',
      healthcare: '',
      healthcareListSearchHolder: [
        {
          id: '1',
          name: 'Hospital 1',
          state: 'Johor',
        },
        {
          id: '2',
          name: 'Hospital 2',
          state: 'Melaka',
        },
        {
          id: '3',
          name: 'Hospital 3',
          state: 'Kedah',
        },
      ],
      healthcareList: [
        {
          id: '1',
          name: 'Hospital 1',
          state: 'Johor',
        },
        {
          id: '2',
          name: 'Hospital 2',
          state: 'Melaka',
        },
        {
          id: '3',
          name: 'Hospital 3',
          state: 'Kedah',
        },
      ],
    };
  }

  Healthcare = ({ id, name, state }) => {
    return (
      <View style={[styles.healthcareItemList]}>
        <TouchableOpacity style={[styles.healthcareItemTextView]}>
          <Text style={{ fontSize: 16, lineHeight: 22, color: '#4A4A4A' }}>
            {name}
          </Text>
          <Text style={{ fontSize: 12, lineHeight: 16, color: '#4A4A4A' }}>
            {state}
          </Text>
        </TouchableOpacity>
      </View>
    );
  };

  filterHealthcareState = state => {
    const newData = this.state.healthcareListSearchHolder.filter(item => {
      if (state === item.state || state == 'All') {
        const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
        const textData = this.state.healthcare.toUpperCase();
        return itemData.indexOf(textData) > -1;
      }
    });
    console.log('new data', newData)
    this.setState({
      state: state,
      healthcareList: newData
    });
  };

  render() {
    return (
      <View style={[styles.container]}>
        <Text>Select Location</Text>
        <TouchableOpacity
          style={{ backgroundColor: 'yellow' }}
          onPress={() => this.filterHealthcareState('All')}>
          <Text>All</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{ backgroundColor: 'yellow' }}
          onPress={() => this.filterHealthcareState('Johor')}>
          <Text>Johor</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{ backgroundColor: 'yellow' }}
          onPress={() => this.filterHealthcareState('Melaka')}>
          <Text>Melaka</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{ backgroundColor: 'yellow' }}
          onPress={() => this.filterHealthcareState('Kedah')}>
          <Text>Kedah</Text>
        </TouchableOpacity>

        <View
          style={{
            flexDirection: 'row',
            flexWrap: 'wrap',
            marginVertical: 20,
            marginHorizontal: 12,
          }}>
          <Text
            style={[
              {
                fontWeight: '600',
                fontSize: 16,
                lineHeight: 22,
                color: '#555555',
              },
            ]}>
            Location:{' '}
          </Text>
          <Text
            style={[
              {
                fontWeight: '600',
                fontSize: 16,
                lineHeight: 22,
                color: '#000000',
              },
            ]}>
            {this.state.state}
          </Text>
        </View>

        <SafeAreaView style={[styles.healthcareItemListView]}>
          <FlatList
            data={this.state.healthcareList}
            renderItem={({ item }) => (
              <this.Healthcare
                id={item.id}
                name={item.name}
                state={item.state}
              />
            )}
            keyExtractor={item => item.id}
            extraData={this.state}
          />
        </SafeAreaView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  healthcareItemListView: {
    flex: 1,
  },
  healthcareItemList: {
    backgroundColor: '#FFFFFF',
    flexDirection: 'row',
    flex: 1,
    marginVertical: 6,
    marginHorizontal: 12,
    borderTopWidth: 0.5,
    borderLeftWidth: 0.5,
    borderRightWidth: 0.5,
    borderBottomWidth: 0.8,
  },
  // healthcareItemImage: {
  //     width: '30%',
  //     height: 100
  // },
  healthcareItemTextView: {
    flex: 1,
    justifyContent: 'space-evenly',
    marginLeft: 15,
  },
});

无疑无虑

单击按钮后 Flatlist 不会立即更新反应本机

Flatlist not update immediately after button clicked react native

state

react-native

react-native-flatlist