Я новичок в React и Redux, так что извините, если это тривиальный вопрос. Я пытаюсь создать приложение, которое имитирует отношения здания с комнатой. Между зданиями и комнатами существует отношение один ко многим, то есть в каждом здании может быть много комнат. Я следую рекомендациям здесь и использую форму нормализованного состояния, например
{
buildings: {
1: {
name: "A",
rooms: [1, 2, 3]
},
2: {
name: "B",
rooms: [4, 5, 6]
},
// etc.
},
rooms: {
1: {
name: "405"
},
2: {
name: "kitchen"
},
// etc.
}
}
Это мое начальное состояние:
{
buildings: {},
rooms: {}
}
Что касается моего приложения реакции , У меня есть Building и Room компонент. Компонент Building отображает все Rooms, которые он имеет. Каждый Room получает свой идентификатор от своих реквизитов, переданных Building. Компонент Building также извлекает данные с сервера.
class Building extends Component {
componentDidMount() {
fetchData() // fetching data using thunk and populate Redux state
}
render() {
return {this.props.buildings[0].map(roomId => <Room key={roomId} />)}
}
}
const mapStateToProps = state => ({
buildings: state.buildings
})
export default connect(mapStateToProps)(Building)
А вот как я настраиваю компонент Room:
class Room extends Component {
render() {
return {this.props.name}
}
}
const mapStateToProps = (state, ownProps) => ({
name: state.rooms[ownProps.key].name
})
export default connect(mapStateToProps)(Room)
Проблема заключается в получении данных, начальное состояние пусто и mapStateToProps из Room компонентов завершается ошибкой, потому что состояние еще не заполнено, поэтому state.rooms[ownProps.key] возвращает undefined, и я получаю следующую ошибку:
Uncaught TypeError: Cannot read property 'name' of undefined
at Function.mapStateToProps [as mapToProps]
Что будет лучшей практикой для решения этой проблемы? Как я (и должен) визуализировать компонент, состояние которого строго зависит от состояния Redux, которое становится доступным только после извлечения?
Спасибо всем.