React / Ax ios - отображать часть URL - PullRequest
Новая
       10

React / Ax ios - отображать часть URL

0 голосов
/ 12 января 2020

Я использую этот Dogs API и хочу отобразить имя собаки с созданным изображением.

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

https://images.dog.ceo/breeds/basenji/n02110806_4280.jpg

Я хочу только basenji, а не весь URL.

Это можно показать в функции setText.

Как я могу получить имя собаки из URL, а не саму вещь.

КОД 

import * as React from "react";
import { render } from "react-dom";
import axios from "axios";
import "./styles.css";

function App() {

  const [images, setImage] = React.useState("");
  const [text, setText]    = React.useState("");

  function btnClick() {

    axios
        .all([axios.get("https://dog.ceo/api/breeds/image/random"), 
              axios.get("https://dog.ceo/api/breeds/list/all")
         ]) 
        .then(axios.spread((response) => {
              setImage(response.data.message);
              setText(response.data.message);
         }))     
        .catch(err => {
            console.log("Error happened during fetching!", err);
        });
  }

  return (
    <div className = "App">
      <img    className = "Img" src={images} alt="broken"/>
      <button className = "Button" onClick = {btnClick}>Doggie!</button>
      <p>You got a {text}</p>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Ответы [ 2 ]

0 голосов
/ 12 января 2020

Используйте регулярное выражение, чтобы захватить породу части пути. exec возвращает массив с соответствием в качестве первого элемента и всеми захваченными группами после. 

const breedRegex = /breeds\/(\w+)\//i;

const path = "https://images.dog.ceo/breeds/basenji/n02110806_4280.jpg";

console.log(breedRegex.exec(path));
0 голосов
/ 12 января 2020

Хотя, не знаю, но если каждая ссылка отображает текст, подобный тому, который вы упомянули, одним из решений будет разделение текста на '/' на основе индекса, чтобы получить породу 

 .then(axios.spread((response) => {
              setImage(response.data.message);
              setText(response.data.message.split('/')[4]);
         }))
...