React CardImg not rendering

Question

我正试图让我的React CardImg进行渲染，但运气不佳。我正在导入照片数组，在状态中传递它，并尝试在线路的40CardImg组件上渲染它。我尝试过更改文件路径，但没有成功。如有任何帮助，我们将不胜感激。Images文件夹在公用文件夹中。

import React, { Component } from 'react';
import { CardTitle, Jumbotron, Card, CardBody, CardHeader, CardImg, Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Input, Label, Col, Row, InputGroup, CardSubtitle, CardImgOverlay } from 'reactstrap';
import DatePicker from "react-datepicker";
import { PHOTOS } from '../shared/photos';
import "react-datepicker/dist/react-datepicker.css";

class Home extends Component {
constructor(props) {
super(props);
this.state = {
isModalOpen: false,
photos: PHOTOS,
};
this.toggleModal = this.toggleModal.bind(this)
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(values) {
this.props.postQuery(values);
};
toggleModal() {
this.setState({
isModalOpen: !this.state.isModalOpen
});
}
render() {
return (
<React.Fragment>
<Jumbotron id="homePage"></Jumbotron>
<div className="container">
<div className="row">
<div className="col-sm-6">
<h1>Maximum Experience</h1>
<h2>Minimum Weight</h2>
</div>
<div className="col-sm-6">
<Card>
<CardImg src={this.state.photos.image} width='100%' alt="Hiking" />
</Card>
</div>
</div>

photos.js

export const PHOTOS = [
{
id: 0,
name: 'Card Home Image',
image: 'images/homeCard.jpg',
}
]

Answer 1

您的this.state.photos是一个数组。所以你需要{this.state.photos[0].image}。

当你在数组中有多个照片对象时，你需要迭代它来渲染所有照片，比如

{
this.state.photos.map(photo => (
<Card>
<CardImg src={photo.image} width='100%' alt="Hiking" />
</Card>
)
}