链接提取调用React.js

Question

I'm making an application where I have to grab certain data from the Github API. I need to grab the name, url, language and latest tag. Because the latest tag is in a separate url, I need to make another fetch call there to grab that data.

I'm running into a certain amount of errors.

1st being the typeError cannot read property 'name' of undefined . I'm sure this is from the fetch call to the tag url where there isn't any data. I'm not really sure how to check if it's undefined. I've tried calling checking to see if the typeof data is undefined and so on but still get the error.

2nd problem being my tag url data doesn't show up with the other data. I'm sure I'm chaining the data wrong because when I click the add button it shows up.

Here is my code:

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

class App extends Component {
  state = {
    searchTerm: '',
    repos: [],
    favourites: []
  }

  handleChange = e => {
    const { searchTerm } = this.state

    this.setState({ searchTerm: e.target.value })

    if (searchTerm.split('').length - 1 === 0) {
      this.setState({ repos: [] })
    }
  }

  findRepos = () => {
    const { searchTerm } = this.state

    // First api call here
    fetch(`https://api.github.com/search/repositories?q=${searchTerm}&per_page=10&access_token=${process.env.REACT_APP_TOKEN}
`)
      .then(res => res.json())
      .then(data => {
        const repos = data.items.map(item => {
          const { id, full_name, html_url, language } = item
          const obj = {
            id,
            full_name,
            html_url, 
            language,
            isFavourite: false
          }

          // Second api call here. I need the data from map to get the tags for the correct repo
          fetch(`https://api.github.com/repos/${full_name}/tags`)
            .then(res => res.json())
            .then(data => {
              obj.latest_tag = data[0].name
            })
            .catch(err => console.log(err))

          return obj
        })

        this.setState({ repos })
      })
      .catch(err => console.log(err))
  }

render() {
  const { searchTerm, repos, favourites } = this.state

  return (
    <div className="App">
      <h1>My Github Favorites</h1>
      <input 
        type="text"
        placeholder="search for a repo..."
        value={searchTerm}
        onChange={e => this.handleChange(e)}
        onKeyPress={e => e.key === 'Enter' && this.findRepos()}
      />
      <button 
        type="submit" 
        onClick={this.findRepos}>
        Search
      </button>

     <div className="category-container">
      <div className="labels">
        <h5>Name</h5>
        <h5>Language</h5>
        <h5>Latest Tag</h5>          
      </div>

      // Here I list the data
      {repos.map(repo => (
        <div key={repo.id}>
          <a href={repo.html_url}>{repo.full_name}</a>
          <p>{repo.language}</p>
          {repo.latest_tag ? <p>{repo.latest_tag}</p> : <p>-</p>}
          <button onClick={() => this.addToFavs(repo)}>Add</button>
        </div>
      ))}   

      <h1>Favourites</h1>
      {favourites.map(repo => (
        <div key={repo.id}>
          <a href={repo.html_url}>{repo.full_name}</a>
          <p>{repo.language}</p>
          <p>{repo.latest_tag}</p>
          <button>Remove</button>
        </div>
      ))}   
    </div>
  </div>
  )
}
}

export default App

Answer 1

If you use Promise.all(), you could rewrite your code like the following.

findRepos = () => {
const { searchTerm } = this.state;

// First api call here
const first = fetch(
  `https://api.github.com/search/repositories?q=${searchTerm}&per_page=10&access_token=${
    process.env.REACT_APP_TOKEN
  }`
);
// Second api call here. I need the data from map to get the tags for the correct repo
const second = fetch(`https://api.github.com/repos/${full_name}/tags`);
Promise.all([first, second])
  .then((res) => Promise.all(res.map(r => r.json())))
  .then([data1, data2] => {
    data1.then((firstData) => {
      /*Do something you want for first.*/
    });
    data2.then((secondData) => {
      /*Do something you want for second.*/
    });
  })
  .catch((err) => console.log(err));
};

Hope this works for you.