[RUBY] [Avec React] Comment afficher quelque chose comme "Toutes les ○ histoires" que l'on trouve souvent sur les sites de publication de romans

introduction

Cette fois, j'ai eu beaucoup de mal (il m'a fallu 3 jours) pour afficher "Toutes les histoires ○" que l'on trouve souvent sur les sites de publication de romans sur ma propre application, je voudrais donc laisser cela comme un commandement.

Ce que je voulais réaliser

Nous avons préparé deux modèles, l'un qui a un rôle de type dossier appelé «série» et l'autre qui stocke plusieurs modèles dans la série appelée «élément» »(relation un-à-plusieurs).
Afficher toutes les «séries» sur la «page racine», récupérer tous les «éléments» appartenant à cette «série», compter le nombre total et «afficher sous la forme de« tous ~ ». Je veux.

Raison de la difficulté

Parce que je voulais afficher la page racine. Normalement, si vous essayez d'obtenir des «éléments appartenant à chaque série», par exemple, si l'URL est «/ series / 104» «, vous obtenez le paramètre de série (104 dans ce cas) et vous vous fiez à ce paramètre pour l'élément Obtenir.

C'est pourquoi je réfléchissais à la façon d'obtenir les paramètres de chaque série sur la page racine où les paramètres n'existent pas (c'était une histoire simple quand j'y pense maintenant).

Environnement, hypothèses, etc.

environnement

l'extrémité avant
React (v16.8 ou supérieur)
React Hooks (utilisez des hooks personnalisés)
axios
Back end
Rails (série 5.2)

supposition

Les étapes telles que la configuration CORS et la création de modèle sont omises.
PUMA spécifie l'hôte local côté Rails comme 3001 par défaut.

Côté rails

modèle

スクリーンショット 2020-09-21 16.29.12.png

Manette
Api::V1::SeriesController
Créez une action qui renvoie la série entière et une action qui renvoie le nombre d'éléments avec ce contrôleur.
Routage
Racine: " / " → `` "api / v1 / series # index" `
Acquisition d'objets: " api / v1 / item_count /: series_id " → " api / v1 / series # item_count "

Côté réaction

Composants à préparer
Home component: acquiert toutes les séries et donne à un composant appelé Series le rôle de passer chaque donnée dans l'ordre.
Composant de série: affiche chaque série avec ce composant.
ʻItemCount component`: Affiche uniquement le nombre total d'éléments de chaque série.
ʻUseFetch Custom Hook`: Récupère les données de Rails.

Code côté rails

routage

`routes.rb`


 Rails.application.routes.draw do
  
  #racine
  root to: 'api/v1/series#index'
  #Nombre d'éléments
  get 'api/v1/item_count/:id', to: 'api/v1/series#item_count'

end

manette

`app/controller/api/v1/series_controller.rb`


class Api::V1::SeriesController < ApplicationController

    # item_Rappelez la série obtenue à partir des paramètres vers l'action de comptage
    before_action :set_series, only: [:item_count]

    def index
        @series =Series.all
        render json: { 
            status: 200,
            series: @series,
            keyword: "index_of_series"  #Utilisé côté React
        }
    end

    def item_count
        @items = @series.items.all    #Obtenir des éléments associés à une série
        @items_count = @items.count    #Comptez le nombre total d'articles
        render json: {
            status: 200, 
            item_count: @item_count,   #Envoyer le décompte au format JSON à React
            keyword: "item_count"     #Utilisé côté React
        }
    end

    
    private

        #Obtenez la série en vous basant sur les paramètres
        def set_series
            @series = Series.find(params[:id])
        end

end

Code côté React

//hiérarchie

//src
//  ├ Home.js
//  ├ Series.js
//  ├ ItemCount.js
//  └ useFetch.js

useFetch crochet personnalisé

`src/useFetch.js`



import { useState, useEffect } from "react"
import axios from 'axios'

//L'utilisation est obligatoire au début de la phrase pour les hooks personnalisés
//Passer la méthode et l'url en tant qu'arguments de useFetch
//Ceci est utilisé pour communiquer avec les rails dans les composants Home et ItemCount
//Pour spécifier les requêtes HTTP et le routage
export default function useFetch({method, url}) {
    //Définition de la valeur initiale.
    const [items, setItems] = useState("")

    useEffect(() => {
        const getItems = () => {
            //Depuis le composant Home / ItemCount avec la méthode et l'url ici
            //Vous substituerez la méthode et le routage qui seront envoyés.
            axios[method](url)
                .then(response => {
                    let res = response.data
                    let ok = res.status === 200
                    //Acquérir toutes les séries
                    //Le mot clé spécifié côté Rails est utilisé ici.
                    //C'est ainsi qu'il se distingue du décompte.
                    if (ok && key === 'index_of_series') {
                        setItems({ ...res.series })
                    //Obtenez le nombre total d'articles par série
                    } else if (ok && key === 'item_count') {
                        setItems(res.item_count)
                    }
                })
                .catch(error => console.log(error))
        }
        getItems()
    }, [method, url, items])

    return {
        items  //Rendre la variable items disponible pour d'autres composants.
    }
}

Composant maison

`src/Home.js`


import React from 'react'

import Series from './Series'
import useFetch from './useFetch'

function Home() {
    //Ici, nous recevons les données de série obtenues par Rails à partir de useFetch.
    //Pour la méthode, spécifiez get, et pour l'url, spécifiez l'URL de la racine Rails. Cette volonté
    //UseFetch envoie une requête à Rails route routing
    //Ensuite, stockez les données reçues de Rails dans les éléments.
    const { items } = useFetch({
        method: "get",
        url: 'http://localhost:3001'
    })

    return (
        <div>
             {/* Object.keys()Utilisez la méthode pour afficher les éléments envoyés en JSON*/}
             {/*Il est transmis au composant Series un par un par un traitement en boucle.*/}
             {/*JSON est{ {...}, {...}, {...} }Supposé être quelque chose comme*/}
              {Object.keys(items).map(key => (
                  <Series key={key} items={items[key]} />
              ))}
        </div>
    )
}

export default Home

Composant de série

`src/Series.js`


import React from 'react'

import ItemCount from './ItemCount'

function Series(props) {
    //L'identifiant de chaque série est obtenu ici, en se basant sur les accessoires envoyés depuis Home.
    //En utilisant cet identifiant comme paramètre, vous pouvez accéder aux éléments appartenant à chaque série.
    const seriesId = props.items.id
    const seriesTitle = props.items.title

    return (
        <div>
             <div>{seriesTitle}</div>
             {/*Transmettez l'ID de la série au composant ItemCount.*/}
             <ItemCount {...props} seriesId={seriesId} />
        </div>
    )
}

export default Series

Composant ItemCount

`src/ItemCount.js`


import React from 'react'

import useFetch from './useFetch'

function SeriesCount(props) {
    //Communiquez avec Rails en utilisant useFetch.
    //la méthode est get, l'url est Rails`api/v1/item_count/${props.seriesId}`Est spécifié.
    //En insérant l'id de chaque série qui provient du composant Series dans la partie id,
    //Des rails"api/v1/item_count/:id"Une requête est envoyée au routage
    //Après cela, il reçoit le nombre d'articles dans chaque série de Rails et le stocke enfin dans des articles.
    const { items } = useFetch({ 
       method: 'get', 
       url: `http://localhost:3001/api/v1/item_count/${props.seriesId} `
    })

    return (
        <div>
            {/*Rendez le nombre total d'articles envoyés par Rails ici.*/}
(Cette série est tout{items}Je possède 1 article)
        </div>
    )
}

export default SeriesCount