Блог

Я использую метод filter, чтобы выделить один признанный элемент в массиве и использовать его для отображения его состояния в моем домашнем компоненте. Я использую метод filter в MainComponent, передавая его в домашний компонент, где я хочу, чтобы функциональный компонент AddCard отображался. Я получаю сообщение об ошибке «невозможно прочитать изображение undefined», поэтому я предполагаю, что я делаю что-то не так при передаче своих реквизитов.

MainComponent.js

 class Main extends Component{
    constructor(props){
        super(props);
        this.state={
            whyfastpack: WHYFASTPACK
        };
    }

    render(){

        const LandingPage =()=>{
            return (
                <Landing />
            );
        };

        const HomePage=()=>{
            return (
                <Home   
                    lightweight={this.state.whyfastpack.filter(lightweight => lightweight.featured)[0]}
                />
            );
        };

        return(
            <div>
                <Header />
                <Switch>
                    <Route exact path='/' component={LandingPage} />
                    <Route path ='/home' component={HomePage} />
 

HomeComponent.js

    ...
                            </div>
                            <div className='col-md m-1'>
                                <AddCard />
                            </div>
                        </div>


   ....

function RenderCard({ item }) {
    return (
        <Card>
            <CardImg src={this.image} alt={item.name} />
            <CardBody>
                <CardTitle>{item.name}</CardTitle>
                <CardText>{item.comment}</CardText>
            </CardBody>
        </Card>
    );
}


function AddCard(props) {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md m-1">
                    <RenderCard item={props.lightweight} />
                </div>
            </div>
        </div>
    );
}
 

whyFastPack.js

 export const WHYFASTPACK = [
    {
        id: 0,
        image: 'images/pnw.jpg',
        name: 'Reduce Weight',
        comment: 'Carry only what you need for the day, not a month! With fast-packing you only need to bring enough to get you through each day!',
        featured: true,
    }
]
 

Вы забыли передать lightweight prop в AddCard from HomeComponent .

 <div className='col-md m-1'>
  <AddCard lightweight={this.props.lightweight} />
</div>