Нужна помощь в создании навигационной панели для отображения изображений из API

Question

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

Мой компонент приложения является основным компонентом, который выполняет запрос к flickr с помощью этой функции, это работает, поскольку я могу искать изображения в поисковом вводе

//this function will create the search feature
   performSearch = (query = "sunset") => {
     //include a query parameter so that flickr can return images based on user input, and provide a default value for query parameter to display sunset pics when the page first loads
     //fetch data from flickr
     axios 
       .get(
         `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&tags=${query}&per_page=24&format=json&nojsoncallback=1`
       )
       .then(response => { //set the response so that pics will be equal to the data array containing photos from flickr
        console.log(response)
         this.setState({
           pics: 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);
       });
   }; 

однако моя цель - рендерить изображения из компонентов Cats , Dogs и Computer и показывать изображения на основе нажатой кнопки, но я не являюсьдействительно уверен, как это сделать, это мой компонент Cats

import React from "react";

const Cats = () => (
  <div>
    <h2>I want to render cat images as soon as a user click the cats button</h2> {/*pass string as prop from app line 29*/}
    <p>Is it true that cats have 9 lives?</p>
  </div>
);

export default Cats;

Я подумал, что должен упомянуть, что мои 3 темы находятся внутри папки Components, а мой app.js находится снаружи, как этот

Будем благодарны за любые полезные советы, это мое репо для справки https://github.com/SpaceXar20/react_gallery_app_updated

Answer 1

Я посмотрел на репо, и это излишне сложно ... вот что вы можете сделать:

Четыре компонента: App.js, Form.js, Gallery.js, GalleryItem.js плюс вспомогательный методдля axios ...

Вот ваш App.js:

import React from 'react';

import Form from './Form';
import Gallery from './Gallery';

import flickr from '../utils/flickr';

class App extends React.Component {
  state = { images: [], isLoading: true };

  async componentDidMount() {
    const response = await flickr.get('/services/rest/', {
      params: {
        tags: 'random',
      },
    });
    this.setState({ images: response.data.photos.photo, isLoading: false });
  }

  handleSearch = async term => {
    this.setState({ isLoading: true });
    const response = await flickr.get('/services/rest/', {
      params: {
        tags: term,
      },
    });
    this.setState({ images: response.data.photos.photo, isLoading: false });
  };

  fetchCats = async () => {
    this.setState({ isLoading: true });
    const response = await flickr.get('/services/rest/', {
      params: {
        tags: 'cats',
      },
    });
    this.setState({ images: response.data.photos.photo, isLoading: false });
  };

  fetchDogs = async () => {
    this.setState({ isLoading: true });

    const response = await flickr.get('/services/rest/', {
      params: {
        tags: 'dogs',
      },
    });
    this.setState({ images: response.data.photos.photo, isLoading: false });
  };

  fetchComputers = async () => {
    this.setState({ isLoading: true });

    const response = await flickr.get('/services/rest/', {
      params: {
        tags: 'laptops',
      },
    });
    this.setState({ images: response.data.photos.photo, isLoading: false });
  };

  render() {
    if (this.state.isLoading) {
      return <div className="spinner">Loading...</div>;
    }

    return (
      <div className="photo-container">
        <Form handleSearch={this.handleSearch} />
        <nav className="main-nav">
          <ul>
            <li onClick={this.fetchCats}>CATS</li>
            <li onClick={this.fetchDogs}>DOGS</li>
            <li onClick={this.fetchComputers}>COMPUTERS</li>
          </ul>
        </nav>
        <h2>Results</h2>
        <Gallery images={this.state.images} />
      </div>
    );
  }
}

export default App;

Вот ваш Form.js:

import React from 'react';

class Form extends React.Component {
  state = { term: '' };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
    this.props.handleSearch(this.state.term);
    this.setState({ term: '' });
  };

  render() {
    return (
      <form className="search-form" onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="term"
          placeholder="Search"
          value={this.state.term}
          onChange={this.handleChange}
        />
        <button
          type="submit"
          className="search-button"
          onClick={this.handleSubmit}
        >
          <svg
            fill="#fff"
            height="24"
            viewBox="0 0 23 23"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
            <path d="M0 0h24v24H0z" fill="none" />
          </svg>
        </button>
      </form>
    );
  }
}

export default Form;

Вот ваш Gallery.js:

import React from 'react';
import GalleryItem from './GalleryItem';

const Gallery = ({ images }) => (
  <ul>
    {images.map(image => {
      return <GalleryItem key={image.id} image={image} />;
    })}
  </ul>
);

export default Gallery;

Вот ваш GalleryItem.js:

import React from 'react';

const GalleryItem = ({ image }) => (
  <li>
    {image && (
      <img
        src={`https://farm${image.farm}.staticflickr.com/${image.server}/${
          image.id
        }_${image.secret}.jpg`}
        alt={image.title}
      />
    )}
  </li>
);

export default GalleryItem;

И, наконец, вот ваш помощник axios:

import axios from 'axios';

const API_KEY = process.env.REACT_APP_FLICKR_KEY; (using the built in .env instead of config...)

export default axios.create({
  baseURL: 'https://api.flickr.com',
  params: {
    method: 'flickr.photos.search',
    per_page: 24,
    format: 'json',
    nojsoncallback: 1,
    api_key: API_KEY,
  },
});

Нет необходимости в реакции-маршрутизаторе imho ...

Вот живая демонстрация (ВАЖНОПРИМЕЧАНИЕ: найдите файл .env в корне проекта, вы увидите что-то вроде этого: REACT_APP_FLICKR_KEY=YOUR_API_KEY_HERE. Просто замените YOUR_API_KEY_HERE своим ключом API ... не нужно заключать его в кавычки ...)https://codesandbox.io/s/n5z516xl2m