Собаки API возвращают неопределенные ошибки 404 React.js - PullRequest
Новая
       1

Собаки API возвращают неопределенные ошибки 404 React.js

0 голосов
/ 05 октября 2019

Я пытаюсь получить конкретные фотографии, которые принадлежат породе собаки, когда пользователь нажимает на породу (например, они нажимают на «собаку», а затем появляются фотографии 3 случайных собак). Я продолжаю получать GET https://dog.ceo/api/breed/undefined/images/random/3 404 (ошибка 404 и возвращение неопределенного внутри URL-адреса извлечения) в инструментах разработчика при нажатии на конкретную породу. Когда я console.log breedName внутри getSelectedBreed, он возвращается как конкретная порода, на которую щелкнул пользователь, однако, как только интерпретатор доберется до метода, selectBreed, console.log возвращает undefined.

Вот мой код для моего App компонента и Breeds компонента, спасибо!

App компонента: 

import React, { Component } from 'react';
import './App.css';
import Header from '../Header/Header';
import Breeds from '../Breeds/Breeds';

class App extends Component {
  constructor() {
    super();
    this.state = {
      breedName: '',
      breeds: [],
      hasErrors : false
    }
  }

  getSelectedBreed = (breedName) => {
    this.setState({
      breedName: breedName,
    })
    this.selectBreed();
  }

  selectBreed = (breedName) => {
    console.log('breedName:', breedName)
    fetch(`https://dog.ceo/api/breed/${breedName}/images/random/3`)
    .then(res => res.json())
    .then(breed => this.setState({ getSelectedBreed: breed.breedName }))
    .catch(() => this.setState({ hasErrors: true }))
  }

  componentDidMount() {
    const breedUrl = 'https://dog.ceo/api/breeds/list/all'
    fetch(breedUrl)
      .then(res => res.json())
      .then(data => this.setState({breeds: data.message}))
      .catch(() => this.setState({ hasErrors: true }))
  }

  render() {
    console.log('breed', this.state.breedName)
    return (
      <div>
        <Header />
        <Breeds 
          breeds={this.state.breeds} 
          getSelectedBreed={this.getSelectedBreed}
        />
      </div>
    )
  }
}

export default App;

и Breeds компонента: 

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

class Breeds extends Component {
  constructor(props) {
    super(props);
    this.state={

    }
  }

  render() {
    const listOfBreeds = Object.keys(this.props.breeds)
    const breedItems = listOfBreeds.map((breedName, index) =>
      <div key={index}>
      <div onClick={()=>this.props.getSelectedBreed(breedName)}>
        <p className='breed-name' onClick={()=>this.props.getSelectedBreed(breedName)}>{breedName}</p>
      </div>
    </div>
    )
    return (
      <div>
        <div className='breed-container'>{breedItems}</div>
      </div>
    );
  }
}

export default Breeds;

1 Ответ

0 голосов
/ 05 октября 2019

Похоже, вы забыли передать имя хлеба в методе selectBreed. 

getSelectedBreed = (breedName) => {
    this.setState({
      breedName: breedName,
    })
    this.selectBreed(breedName); //Missing breedName in your code
}
...