时间戳

首页 > 解决方案 > 为什么我的 PhotoComponent 没有更新正确的照片？

javascript - 为什么我的 PhotoComponent 没有更新正确的照片？

问题描述

这是 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();
    console.log(this.props.data)
  } 
  componentDidUpdate() {
    console.log(this.props.data)
  } 

  render() {
    return (
      <div className="photo-container">
        <h2>Results</h2>
        <ul>
          {this.props.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），但是当我控制台记录查询字符串时，我显然在其中输入了不同的值。那么为什么我仍然让猫出现？我知道默认情况下查询等于猫，但是当我在其中调用函数时PhotoList，应该使用查询道具将其设置为不同的值。

我究竟做错了什么？

标签： javascriptreactjsreact-router

解决方案

问题是，当组件第一次使用 query 挂载时， componentDidMountfrom组件只执行一次。PhotoListcats

对于下一个路线更改，它将不会执行componentDidMount，您将不会获得新数据而是旧数据。

在你的componentDidUpdate你必须检查你是否得到新的道具并再次调用你的handleImages函数来调用你的getImages函数，

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

另一个问题是getImages函数没有被调用。

getImages={()=>this.getImages}

你应该做这个，

getImages={this.getImages}

推荐阅读