Элемент не выбирается и не обновляется из react-native-dropdown-picker

#reactjs #react-native #react-native-android #react-native-ios

#reactjs #react-native #react-native-android #react-native-ios

Вопрос:

Я использую React-native-dropdown-picker для отображения списка дат, однако при выборе любого элемента значение не выбирается

введите описание изображения здесь

полный код:

 import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {getMonthDate} from '../../../utils/dateUtils';
import Icon from 'react-native-vector-icons/FontAwesome';
import DropDownPicker from 'react-native-dropdown-picker';
import {getFullDate} from '../../../utils/dateUtils';
import DaysInAWeek from './DaysInAWeek';
export default function Header(props) {
  const [daysInAWeek, setDaysInAWeek] = useState([]);
  const data = props.data;
  // const end_ts = props.end_ts;
  // const start_ts = props.start_ts;
  const end_ts = 1605916800000;
  const start_ts = 1603238400000;

  let interval = 7 * 86400000;
  let arr = [];
  let new_arr = [];
  for (let i = start_ts; i < end_ts; i = i   interval) {
    arr.push(i);
  }

  for (var i = 0; i < arr.length; i  = 2) {
    new_arr.push(arr.slice(i, i   2));
  }

  let dateArr = [];

  for (let a of new_arr) {
    console.log('a', a);
    let label;
    if (a.length > 1) {
      label = getMonthDate(new Date(a[0]))   '-'   getMonthDate(new Date(a[1]));
    } else {
      label = `${getMonthDate(new Date(a[0]))}`;
    }
    let obj = {
      label,
      value: a,
    };
    dateArr.push(obj);
  }

  function onValSelect(val) {
    if (val.length > 1) {
      let arr = [];
      for (let i = val[0]; i <= val[1]; i  = 86400000) {
        let date = getMonthDate(new Date(i));
        arr.push(date);
      }

      console.log('final arr', arr);
      setDaysInAWeek(arr);
    } else {
      console.log('single date', new Date(val));
      setDaysInAWeek(new Date(val));
    }
  }

  console.log('date Arr', dateArr);

  return (
    <View>
      <View style={styles.container}>
        {console.log('new array', dateArr)}
        {console.log('arr', arr)}
        <Icon
          name="arrow-left"
          size={20}
          color="#fff"
          style={{marginTop: 12}}
        />
        {console.log('----------date', dateArr)}
        {dateArr != null amp;amp; (
          <DropDownPicker
            onChangeItem={value=>{
              onValSelect(value)
            }}
            items={dateArr}
            itemStyle={{
              // justifyContent: 'flex-start',
              flexDirection:'row'
            }}
            
            containerStyle={{height: 40,width:'80%',zIndex:2}}
          />
        )}
        {console.log('----------days', daysInAWeek)}
        
      </View>
      <DaysInAWeek daysInAWeek={daysInAWeek} />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FE017E',
    // height: 56,
    zIndex:2,
    width: '100%',
    flexDirection: 'row',
    padding: 10,
  },
});
 

Где я ошибаюсь?

Комментарии:

1. «когда я выбираю какой-либо элемент, значение не выбирается» — кажется немного оксюморонным, можете ли вы объяснить, что выбрано или не выбрано? Какие шаги по отладке вы предприняли? Есть ли какие-либо журналы ошибок? onValSelect Вызывается? Если да, имеет ли оно ожидаемое val значение? Для чего весь цикл массива в теле функции? Похоже, в основном создаются параметры для средства выбора? Кроме того, я вижу, что объект date сохраняется в состоянии, а не сохраняет его в виде массива ( setDaysInAWeek(new Date(val)); ).

2. onValSelect не вызывается, в этом проблема, и я попытался удалить все остальные элементы в представлении, утешил состояние, но метод вообще не вызывается, очень странно, но я не уверен в причине

3. Думаете, вы могли бы создать бегущую закуску Expo , которая воспроизводит эту проблему?