0

我在减速器中有如下初始状态

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根据日期过滤其中的数据，则 sectionlist 不会在屏幕上加载任何内容。

在外部函数中过滤也无济于事，如下所示。

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}
                />

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

4

3 回答 3

1

试试这个！

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

于 2019-08-27T04:31:16.193 回答
1

您很接近，但您的每种方法都有一些小错误。

在使用外部方法的方法 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在这种情况下，如果日期不匹配，只要您在组件中考虑未定义，它将起作用。

于 2019-08-27T04:52:10.550 回答
1

首先，该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方法，看看过滤后的数组是否是你所期望的。从那里开始，如果仍然没有显示预期的结果，我相信您将能够继续调试。

于 2019-08-27T04:55:23.630 回答