Question

我有一些数组的样本数据，我想根据选定的条件（状态）过滤平面列表。但是，单击我的按钮却未更改单位列表时，状态变量会更改。我必须第二次单击该按钮，以便更改单位列表

我在图片中的情况：

在开始时（this.state.state ='All'）-> 1st Image
我点击柔佛州按钮，this.state.state变量确实更新为“柔佛州”，但单位列表未更改-> 2nd Image
我再次单击Melaka按钮，this.state.state变量再次更新为“ Melaka”，但根据“ Johor”变量-> 3rd Image
< / li>

下面是我的编码。

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,
  },
});

疑惑重重

单击按钮后本机列表不会立即更新本机

2 个答案: