Функция Array.map возвращает неопределенный или [неопределенный]

#javascript #arrays #reactjs

#javascript #массивы #reactjs

Вопрос:

Эй, ребята, я здесь немного озадачен. Что я делаю не так, у меня есть и массив объектов во внешнем файле, который выглядит примерно так :

 import moment from "moment";

export default [{
    filterOn: "startDate",
    startDate: moment("01/01/2013", "DD/MM/YYYY").startOf("day"),
    endDate: moment().startOf("day")
}];

Затем я импортирую свой массив через props like : props.datePickerDefinition

В отдельный файл я извлекаю массив и пытаюсь извлечь значение из массива в некоторые состояния через useState и setState

 const [fromToDatePickerColumn, setFromToDatePickerColumn] = useState();
const [dateFrom, setDateFrom] = useState();
const [dateTo, setDateTo] = useState();

Моя цель — использовать useEffect функцию и обновить состояние этих трех элементов с помощью переключателя :

   useEffect(() => {
    props.datePickerDefinition.map((date) => {
        switch (typeof date) {
            case 'string':
                setFromToDatePickerColumn(date.fromToDatePickerFilterOn)
            break;

            case'moment' :
                setDateFrom(date.startDate)
                setDateTO(date.endDate)

        }
    })
})

Итак, сначала у меня есть два вопроса. Могу ли я использовать switch регистр для проверки объекта moment ? И второй и самый важный вопрос заключается в том, почему, когда я извлекаю значение из .map функции, я получаю undefined , но если я проверяю значение, props.datePickerDefinition.map((date) => console.log(date)) я вижу его. Может кто-нибудь помочь мне, я буду очень благодарен, чтобы понять, что я делаю не так.

Я пробовал с .forEach помощью функции :

 const array1 = [{first:'a', second:'b', third:'c'}];

const test = array1.forEach(element => element.first);

console.log(test)

А также .map :

 const array1 = [{first:'a', second:'b', third:'c'}];

const test = array1.map(element => element.first);

console.log(test)

Но в этом случае она возвращает меня ["a"] , и мне нужно только значение, а не Array

1. Вам нужно что-то вернуть с карты? Как я вижу, вы ничего не возвращаете. Если я вижу функцию map и она ничего не возвращает, это меня смущает. forEach было бы лучше, если вы не хотите ничего возвращать

2. По сути fromToDatePickerColumn , должно быть установлено значение "startDate" … из данных из массива и так далее и тому подобное, но в моем случае возвращает меня undefined

3. И вы проверили, что typeof date возвращает "moment" ? Он не возвращается "object" ?

4. Ах, да, я должен проверить object , не включен moment , но тем не менее, если я попытаюсь const test = props.datePickerDefinition.forEach((date) => date.filterOn) , результат все равно undefined будет …. я не понимаю

5. Если вы знаете, что массив содержит только один элемент, вы могли бы просто const test = array1.map(element => element.first)[0]; или даже лучше array1[0].first

Ответ №1:

Вам нужно снова выполнить итерацию по дате, чтобы установить состояния. Но map здесь не подойдет. Попробуйте следующий код:

 useEffect(() => { 

 props.datePickerDefinition.forEach(date =>{
   for(let key in date){
     const dateItem = date[key];
     switch (typeof dateItem) {
      case 'string':
          setFromToDatePickerColumn(date.filterOn);
      break;

      case 'object' :
          setDateFrom(date.startDate);
          setDateTo(date.endDate);
          break;
      default: break;

    }
   }
 })
})

Ответ №2:

Добавьте оператор return внутри переключателей в вашей карте