ReactJS/React-Router: как фильтровать вложенный массив и объекты на основе параметров пути URL?

Question

У меня есть следующие настройки:

Переход к StudentsBoard:

Как маршрут устанавливается:

<Route 
    component={StudentsBoard} 
    path='/StudentsBoard/:name/:day/:color' 
    /> 

А на странице StudentsBoard:

const mapStateToProps = (state, ownProps) => { 
    let student = state.students.filter(student => student.name == ownProps.params.name) 

    let day = ownProps.params.day 
    let color = ownProps.params.color 

    return { 
    carFiles: student[0].day.color //Getting an error here saying day and color are - Uncaught TypeError: Cannot read property 'day'/'color' of undefined 
    } 
} 

Но для let day и let color Я получаю сообщение об ошибке: Uncaught TypeError: Cannot read property 'day'/'color' of undefined

Как я могу сделать переданный в Params, day и color как ссылки на недвижимость в student[0]? Или есть лучший способ фильтрации объекта на основе параметров, переданных через ownProps.params? Хотел бы в конечном итоге перейти к цветному объекту.

Спасибо, и быть уверенным, чтобы голосовать и принимать ответа

EDIT структура

данных:

students: [ 
    { 
    name: Kev 
    monday: { 
     blue: { 
     room: 5 
     }, 
     pink: { 
     root: 6 
     } 
    }, 
    tuesday: { 
     green: { 
     room: 7 
     }, 
     purple: { 
     root: 8 
     } 
    }, 
    }, 
    { 
    name: Jerome 
    monday: { 
     black: { 
     room: 5 
     }, 
     orange: { 
     root: 6 
     } 
    }, 
    tuesday: { 
     yellow: { 
     room: 7 
     }, 
     purple: { 
     root: 8 
     } 
    }, 
    }, 
] 

Answer 1

Как указано в комментарии, вы должны будете использовать

students[0][day][color] 

Что вы сделали, пытался доступ к объекту, который должен был бы выглядеть следующим образом:

var students = [{ 
    day: { 
     color: {} 
    } 
}] 

Поясню на примере:

student.monday 

такая же, как

student['monday'] 

Конечно, версия .monday является более удобно, но при использовании ['monday'] он дает возможность обменивать 'monday' с переменной day, которая представляет собой строку , например. 'monday'.

var propertyName = 'monday'; 
student[propertyName]; 

Обычно следует использовать .monday вариант, когда это возможно, и использовать только скобки, если вы должны (как в вашем случае).

И вы также должны добавить некоторую обработку ошибок, если свойство в вашей структуре данных не существует. Поскольку вы имеете дело со строками из URL-адреса, который пользователь может изменить, ваш код может сломаться.

// check if day and color properties are available 
// for that student 
if(!students[0][day] || !students[0][day][color]) { 
    // either day or color does not exist on student 
    return { carFiles: null }; 
} 
// All good, proceed as normal 

Пожалуйста, обратите внимание, что компонент, то необходимо будет обрабатывать случай, когда this.props.carFiles является null.

Answer 2

. и [''] - эквивалентность. Но я не понимаю, почему вы использовали «день» и «цвет» здесь? В вашей структуре данных таких полей нет.Можете ли вы распечатать их на консоли console.log, чтобы просмотреть день и цвет на первом месте, прежде чем разбирать их с объекта?