Question

我在reducer中的初始状态如下

const initialState = {
    medicationschedule: [
        {
            date: '2019-08-27',
            medications: [
                {
                    title: '8.00 AM', 
                    data: [
                        {name:'item1', isTaken: 1,mg: '500 mg',capsules:'capsule'}, 
                        {name:'item2', isTaken: 4,mg: '2000 mg',capsules:'teaspoon'}
                ]},
                {
                    title: '12.03 PM', 
                    data: [
                        {name:'item3', isTaken: 2,mg: '500 mg',capsules:'capsule'}, 
                        {name:'item4', isTaken: 1,mg: '500 mg',capsules:'capsule'}
                ]},
                {
                    title: '3.30 PM', 
                    data: [
                        {name:'item1', isTaken: 3,mg: '500 mg',capsules:'capsule'}
                ]},
            ]
        }
    ],
    medication: [
        {
            title: '8.00 AM', 
            data: [
                {name:'item1', isTaken: 1,mg: '500 mg',capsules:'capsule'}, 
                {name:'item2', isTaken: 4,mg: '2000 mg',capsules:'teaspoon'}
        ]},
        {
            title: '12.03 PM', 
            data: [
                {name:'item3', isTaken: 2,mg: '500 mg',capsules:'capsule'}, 
                {name:'item4', isTaken: 1,mg: '500 mg',capsules:'capsule'}
        ]},
        {
            title: '3.30 PM', 
            data: [
                {name:'item1', isTaken: 3,mg: '500 mg',capsules:'capsule'}
        ]},
    ]
};

我的React Native SectionList的类如下。

class HomeScreen extends Component {

    state = { 
        selectedDate: Date(),
        isModalVisible: false,
     };


    render() {
        return (
            <SafeAreaView style={styles.containter}>



                <SectionList
                    renderItem={({item, index, section}) => <MedicineRow showTitle={0}  key={index} setWidth='80%' title={item.name} mg={item.mg} capsules={item.capsules} onPress={() => this.medicineRowTapped(item.name)} medstatus={item.isTaken}/>}
                    stickySectionHeadersEnabled={false}
                    renderSectionHeader={({section: {title}}) => (
                       <SectionTitle showTitle={true} title={title}/>
                    )}
                    sections={ 
                        this.props.filteredMedications
                    }
                    keyExtractor={(item, index) => item + index}
                />
            </SafeAreaView>
        )
    }
}

function mapStateToProps(state) {
    return {
        filteredMedications : state.medication
    }
}

export default connect(mapStateToProps)(HomeScreen)

如果我按照mapStateToProps中的说明使用药物，该列表将成功加载。但是，如果我尝试根据日期过滤medictionschedule中的数据，则节列表将不会在屏幕上加载任何内容。

在外部功能中进行过滤也无济于事，如下所示。

medicineForTheDate = () => {
    this.props.filteredMedications.filter((schedule) => {
        if (schedule.date === '2019-08-27') {
            return schedule.medications
        }
    })
}

然后在SectionList内，我称this.medicineForTheDate()

<SectionList
    renderItem={({item, index, section}) => <MedicineRow showTitle={0}  key={index} setWidth='80%' title={item.name} mg={item.mg} capsules={item.capsules} onPress={() => this.medicineRowTapped(item.name)} medstatus={item.isTaken}/>}
    stickySectionHeadersEnabled={false}
    renderSectionHeader={({section: {title}}) => (
       <SectionTitle showTitle={true} title={title}/>
    )}
    sections={ 
        this.medicineForTheDate()
    }
    keyExtractor={(item, index) => item + index}
/>

我还尝试在mapsStateToProps内部进行过滤，但这也无济于事。

function mapStateToProps(state) {
    return {
        filteredMedications : state.medicationschedule.filter((schedule)=>{ schedule.date === '2019-08-27' })
    }
}

然后...

<SectionList
                    renderItem={({item, index, section}) => <MedicineRow showTitle={0}  key={index} setWidth='80%' title={item.name} mg={item.mg} capsules={item.capsules} onPress={() => this.medicineRowTapped(item.name)} medstatus={item.isTaken}/>}
                    stickySectionHeadersEnabled={false}
                    renderSectionHeader={({section: {title}}) => (
                       <SectionTitle showTitle={true} title={title}/>
                    )}
                    sections={ 
                        this.props.filteredMedications.medications
                    }
                    keyExtractor={(item, index) => item + index}
                />

如何在这种情况下过滤数据？

Answer 1

尝试一下！

medicineForTheDate() {
 let filteredValue = this.props.filteredMedications.filter((schedule) => {
    		    		if (schedule.date === '2019-08-27') {
    		        		return schedule.medications
    		    		}
    		     });
  return filteredValue;
}

Answer 2

您很亲密，但是每种方法都有一些小错误。

在使用外部方法的方法1中，您没有从该方法返回值，并且filter的运行不正常。数组上的filter方法将返回另一个仅包含原始数组元素的另一个数组，其中filter子句返回真实值。因此，在您的示例中，即使您返回schedule.medications，您仍然会得到一个包含原始数据的数组。我认为与您的意图最相似的代码是：

medicineForTheDate = () => {
    const matchingMedications = this.props.filteredMedications.filter((schedule) => {
        return schedule.date === '2019-08-27'; // filter if dates are equal
    })
    if (matchingMedications.length) { // if we have a result
        return matchingMedications[0].medications;
    }
    // decide about a default value if there is no match
}

那说我认为for循环更清晰：

medicineForTheDate = () => {
    const {filteredMedications} = this.props;
    for (let i=0; i < filteredMedications.length; i++) {
      const schedule = filteredMedications[i];
      if (schedule.date === '2019-08-27') {
         return schedule.medications
      }
    }
    // decide if you want to return a different value if no match is found
}

对于第二种情况，您也遇到类似的错误-错误地使用过滤器，而实际上没有从过滤器返回值。再次类似

function mapStateToProps(state) {
    return {
        filteredMedications : state.medicationschedule.filter((schedule)=>{ return schedule.date === '2019-08-27' })[0]
    }
}

只要在这种情况下您认为filteredMedications在组件中未定义，那么

就可以使用。

Answer 3

首先，filter方法需要一个函数，该函数接受一个参数（数组中的项目）并返回true（如果该项目应位于过滤后的数组中）或false（如果该项目不应位于过滤后的数组中

例如：

const arr = [1, 2, 3, 4, 5];

const evenNumbersOnly = arr.filter((item) => {
  if (item % 2 === 0) {
    // Even (Want it in the list
    return true;
  } else {
    // Odd (Don't want it in the list
    return false;
  }
});

// evenNumbersOnly will now be [2, 4]

尝试更改您的filter方法，看看过滤后的数组是否符合您的期望。从那里开始，我相信如果仍然无法显示预期的结果，您将能够继续调试。

通过Redux访问SectionList的数据

3 个答案: