Question

这是App.js

import React, {Component} from 'react';
import {
  BrowserRouter,
  Route,
  Switch,
  Redirect
} from 'react-router-dom';
import Search from './Search';
import Nav from './Nav';
import '../index.css';
import axios from 'axios';
import apiKey from './Config';
import NotFound from './NotFound';
import PhotoList from './PhotoList';


class App extends Component {

  state= {
    pictures: []
  }

  componentDidMount() {
    this.getImages()
  }


  getImages=(query='cats')=> {
    axios.get(`https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&tags=${query}&per_page=24&page=1&format=json&nojsoncallback=1`)
      .then(res=> {
        const pictures=res.data.photos.photo
        this.setState({pictures});
      }).catch((error)=> {
        console.log("There was an error parsing your data", error);
      })
  }

  render() {
    console.log(this.state.pictures);
    return (
      <div className="container">
        <Search />
        <Nav getImages={this.getImages}  />
        <Switch>
          <Route exact path="/" render={()=> <Redirect to={'/cats'} />} />
          <Route path='/cats' render={()=> <PhotoList getImages={()=>this.getImages} query='cats' data={this.state.pictures}/>} />
          <Route path='/dogs' render={()=> <PhotoList getImages={()=>this.getImages} query='dogs' data={this.state.pictures} />} />
          <Route path='/computers' render={()=> <PhotoList getImages={()=>this.getImages} query='computers' data={this.state.pictures} />} />
          <Route component={NotFound}/>
        </Switch>
      </div>
    )
  }
}

export default App;

这是PhotoList.js

import React, {Component} from 'react';
import Photo from './Photo';

class PhotoList extends Component {

  handleImages=()=> {
    this.props.getImages(this.props.query);
  }

  componentDidMount() {
    this.handleImages();
  }


  render() {
    const data=this.props.data 
    console.log(this.props.query)
    return (
      <div className="photo-container">
        <h2>Results</h2>
        <ul>
          {data.map((photo,index)=> 
            <Photo 
              farm={photo.farm}
              server={photo.server} 
              id={photo.id}
              secret={photo.secret}
              key={index}
            />
          )}
        </ul>
      </div>
    );
  }
}


export default PhotoList;

我已将getImages函数传递到PhotoList中，该函数可获取数据并更改主应用程序的状态。该函数采用查询字符串（猫，狗或计算机）。然后状态数据作为props向下传递并映射到PhotoList组件中。

即使我输入其他路径（例如/ dogs，/ computers），我的网站仍然只显示cats，但是当我用控制台登录查询字符串时，很明显我在其中输入了不同的值。那么，为什么我仍然要让猫出现？我知道默认情况下查询等于猫，但是当我在PhotoList中调用函数时，应使用查询道具将其设置为其他值。

我在做什么错？

Answer 1

在您的代码中，this.handleImages仅被调用一次，因为componentDidMount仅在组件首先由prop初始化时才被调用。

要获取各种类型的图像，您需要在更改道具时调用。

然后您可以使用componentDidUpdate函数来做到这一点。

   componentDidMount() {
     this.handleImages();
   }

   componentDidUpdate(prevProps) {
     if (prevProps.query !== this.props.query) {
       this.handleImages();
     }
   }

照片未显示在组件中

1 个答案: