子組件未從父狀態更改更新

Question

我正在嘗試從父組件狀態更新子組件的照片。 對於所有其他路由，在安裝應用程序后已經調用了適當的功能。 渲染貓，狗或計算機的組件是PhotoList.js

但是現在，我希望能夠在搜索后輸入一個參數（例如/ search /：id），並在Container.js中運行一個名為getImages的函數，以從Flickr API中搜索任何類型的圖片。

我嘗試使用componentDidMount並使用其中的match參數調用getImages函數，但是它似乎並沒有改變放入其中的數據道具。 有人對我該如何做有什么建議嗎？

這是Container.js

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

class Container extends Component {

  componentDidMount() {
    this.props.getImages(this.props.match.id)
  }

  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 Container 

這是PhotoList.js

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

class PhotoList extends Component {

  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;

這是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';
import NoResults from './NoResults';
import Container from './Container';


class App extends Component {

  state= {
    cats: [],
    dogs: [],
    computers: [],
    searchResult: [],
    loading: true
  }

  componentDidMount() {
    this.getCats()
    this.getDogs()
    this.getComputers()
  }


  getCats=(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 cats=res.data.photos.photo
        this.setState({cats})
      }).catch((error)=> {
        console.log("There was an error parsing your data", error);
      })
  }

  getDogs=(query='dogs')=> {
    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 dogs=res.data.photos.photo
        this.setState({dogs})
      }).catch((error)=> {
        console.log("There was an error parsing your data", error);
      })
  }

  getComputers=(query='computers')=> {
    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 computers=res.data.photos.photo
        this.setState({computers});
      }).catch((error)=> {
        console.log("There was an error parsing your data", error);
      })
  }

  getImages=(query)=> {
    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 searchResult=res.data.photos.photo
        this.setState({searchResult});
      }).catch((error)=> {
        console.log("There was an error parsing your data", error);
      })
  }


  render() {
    return (
      <div className="container">
        <Search getImages={this.getImages}/>
        <Nav />
        <Switch>
          <Route exact path="/" render={()=> <Redirect to={'/cats'} />} />
          <Route path='/cats' render={()=> <PhotoList data={this.state.cats}/>} />
          <Route path='/dogs' render={()=> <PhotoList data={this.state.dogs} />} />
          <Route exact path='/computers' render={()=> <PhotoList data={this.state.computers} />} />
          <Route path='/search/:id' render={(props)=> <Container {...props} getImages={this.getImages} data={this.state.searchResult} />} />
          <Route component={NotFound}/>
        </Switch>
      </div>
    )
  }
}

export default App;

Answer 1

假設您使用的是react-router-dom 4及更高版本。

嘗試

import React, { Component } from "react";
import { withRouter } from "react-router-dom"; //<-- import this
import Photo from "./Photo";

class Container extends Component {
  componentDidMount() {
    // Your this.props.match.id is likely undefined
    this.props.getImages(this.props.match.params.id); // <-- Change here
  }

...

}

export default withRouter(Container); // <-- Change this