нужна помощь на реагировать роутер

Question

Я новичок, чтобы реагировать, и у меня возникают проблемы с передачей массива как реквизита

. В этой функции я запрашиваю данные из API flickr для отображения фотографий, я использовал setState для cats чтобы сохранить этот массив данных

//this function will retrieve the CATS pictures

   renderCats = () => {
    //fetch data from flickr
    axios 
      .get(
        ` https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&tags=cats&per_page=24&format=json&nojsoncallback=1`
      )
      .then(response => { //set the response so that pics will be equal to the data array containing cat photos from flickr
        console.log(response)
        this.setState({
          cats: response.data.photos.photo, 
          loading: false //initialize a loading state to display a loading message
        });
      })
      .catch(error => { //this catch method outputs a message to the console, should axios fail to retrieve data
        console.log("Something went wrong, could not access data", error);
      });
  }; 

, затем в render () я пытаюсь использовать фрагмент кода ниже, где / cats - моя навигационная ссылка, и я пытаюсь визуализировать компонент с именем Cats, нов то же время я пытаюсь передать массив данных с помощью data = {this.state.cats}

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

также это то, что у меня есть в верхней части моего компонента приложения, где я используюsuper () this.state для кошек: [], я думаю, что я борюсь из-за того, что я путаюсь между this.state и this.setState, любые полезные советы по улучшению моего кода будут оценены

class App extends Component { //Class components need to extend  React.Component, and class components require the render()
   constructor() {
     //state for data we want to display from flickr
     super();
     this.state = {
       pics: [], //this array will hold the pictures that will render as soon as the page loads
       cats: [],
       loading: true
     };
   }

   componentDidMount() {
     this.performSearch(); //call performSearch function on the componentDidMount() life cycle
     this.renderCats()
   }

Answer 1

Ошибка в том, как вы передаете реквизит.В вашем примере,

<Route path="/cats" render={ <Cats data={this.state.cats} /> } />

Данные в основном игнорируются.Однако, если вы передадите его так:

<Route
  path="/cats"
  render={(props) => <Cats {...props} data={this.state.cats} />}
/>

У вас будет к нему доступ.Однако, чтобы упростить задачу, могу ли я предложить переместить фактическую функцию выборки данных в компонент, который нуждается в этом?Таким образом, если вы выбираете, скажем, 20 различных вещей, таких как кошки, собаки, мыши, в зависимости от ваших настроек, вы бы заблокировали все приложение для данных, которые могут вам понадобиться или не понадобиться.

Answer 2

Ваш код выглядит нормально, за исключением того, что render prop на Route должен быть функцией .

 <Route path="/cats" render={ () => <Cats data={this.state.cats} /> } /> 

Если вам не нужно, чтобы он былфункция, вы можете использовать component вместо:

 <Route path="/cats" component={ <Cats data={this.state.cats} /> } />