Я пытаюсь реализовать страницу показа для экземпляров моего объекта Car в моем приложении React / Redux с Rails API.
В моей функции рендеринга у меня есть условная настройка для отображения Loading Car...
докомпонент <CarCard />
отображается - но CarCard
никогда не загружается.
Мне интересно, что не так с моим componentDidMount()
, поскольку this.props.cars
не определено.
Вот мой код CarShow:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchCar, removeCar, likeCar } from '../actions/cars';
import CarCard from '../components/CarCard';
import Cars from './Cars';
import LikeButton from '../components/LikeButton';
class CarShow extends Component {
// handleOnClick = () => {
// this.props.likeCar(this.props.car[0])
// }
componentDidMount() {
this.props.fetchCar(this.props.match.params.carId);
}
render() {
let car = this.props.car[0];
const {removeCar, history} = this.props;
return (
<div className='carShow'>
{car ? (
<CarCard />
) : (
<p>Loading Car...</p>
)}
<br></br>
<button onClick={() => removeCar(car.id, history)}>
Delete
</button>
{car ? <LikeButton car={car} likeCar={this.handleOnClick}/> : 'An Error Occured'}
</div>
)
}
}
const mapStateToProps = (state, ownProps) => {
const car = state.cars.find(car => car.id == ownProps.match.params.carId)
return ({
car: state.cars
})
}
export default connect(mapStateToProps, {fetchCar, removeCar, likeCar})(CarShow);
(Пожалуйста, дайте мне знать о любых дополнительных файлах, которые вы хотели бы видеть, если они есть.)
Кроме того, возможно, что моя mapStateToProps
является проблемой - ноЯ не очень знаком с тем, как обрабатываются данные.