Question

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

library(dplyr)
library(stringr)
df %>%
   filter(!str_detect(quote_datetime, fixed(expiration))

photos.js

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>

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>
  )
}

反应 CardImg 不渲染

1 个答案: