我有两个.js文件App和Image。本质上，每当在App.js中单击Find EPI按钮时，就会创建一个Image组件，其中会进行一个fetch调用来检索图像src的列表，以便我可以显示它。
我面临的问题是，我将单击具有正确API参数的按钮，图像将显示，但当我尝试再次单击具有新参数的按钮时，图像将首先清除。我将不得不再次按下按钮，新的图像出现。
我知道这与我在App.js（handleClick()）中触发displayImage的方式有关。我该如何直接切换图像，而不需要点击两次（以清除再次显示图像）。
我已经有一段时间没有使用React了，如果这是一些琐碎的事情并且已经得到了回答，那么很抱歉。

• App.js -

import React from 'react';
import './App.css';
import Image from './Image';

class App extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      imageDate: '',
      displayImage: false
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleChange(event) {
    this.setState({ imageDate: event.target.value });
  };

  handleClick() {
    const {displayImage} = this.state;
    this.setState({displayImage : !displayImage});
  }

render(){

  const isDisplayImage = this.state.displayImage;

  return (
      <div className="row">
        <div className="col-md-6 mx-auto">
          <div className="form-group mb-4">
          <p className="text-center text-white"> Choose a date for Earth Polychromatic Image </p>
            <div className="date input-group p-0 shadow-sm">
              <input
                type="date"
                value = {this.state.imageDate}
                onChange = {this.handleChange}
                className="form-control py-4 px-4"
                id="imageDate"/>
              <div className ="input-group-append"><span className="input-group-text px-4"><i className="fa fa-clock-o"></i></span></div>
            </div>
            <div className="text-center" id="findEPI">
              <button onClick={this.handleClick} type="button" className="btn btn-primary">Find EPI</button>
            </div>
              {isDisplayImage ? <Image imageDate = {this.state.imageDate}/> : ''}
          </div>
        </div>
      </div>
    );
  }
}

export default App;

字符串

• Image.js

import React from 'react';
import './Image.css';
class Image extends React.Component {

  constructor(props) {
    super(props);
    const dateSplit = props.imageDate.split('-');
    this.state = {
      imageDate: props.imageDate,
      year: dateSplit[0],
      month: dateSplit[1],
      days: dateSplit[2],
      enhancedepiAPI: "https://epic.gsfc.nasa.gov/api/enhanced/date/" + props.imageDate,
      retrieveImageAPI: "https://epic.gsfc.nasa.gov/archive/natural/" + dateSplit[0] +
       "/" + dateSplit[1] + "/" + dateSplit[2] + "/png/epic_1b_",
      epiDate : [],
      displayImages: false
    };
  }

  componentDidMount() {
    const fetchPromise = fetch(this.state.enhancedepiAPI);
    const epiDate = this.state.epiDate;
    const retrieveImageAPI = this.state.retrieveImageAPI;

    fetchPromise.then(response => {
      return response.json();
    }).then(images => {
      epiDate.push(images.map(image => retrieveImageAPI + image.identifier + ".png"));
      console.log(epiDate);
      this.setState({displayImages : true});
    });
  }

  render(){

    const displayImages = this.state.displayImages;
    const images = this.state.epiDate[0];

    return (
    <div id="carouselExampleControls" className="carousel slide" data-ride="carousel">
    <div className="carousel-inner">
    {displayImages && images.map(function(imageSrc) {
                return (
                  <div className="carousel-item active">
                    <img className="d-block w-100" src={ imageSrc }/>
                  </div>
                );
              })} </div></div>
    );
  }


}


export default Image;

型