狗 API 品种返回未定义的 404 错误 React.js

Question

I'm trying to get the specific photos that belong to a dog breed when a user clicks on a breed (for instance, they click on "hound" and then the photos of 3 random hounds appear). I continue to receive GET https://dog.ceo/api/breed/undefined/images/random/3 404 (404 error and returning undefined inside of the fetch url) in the dev tools when clicking on the specific breed. When I console.log breedName inside of getSelectedBreed , it comes back as the specific breed that the user clicked on however, once the interpreter gets to the method, selectBreed , the console.log returns undefined .

Here is my code for my App component and Breeds component, thank you!

App component:

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;

and Breeds component:

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;

Answer 1

Looks like you forgot to pass bread name in selectBreed method.

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