0 
import React, { Component } from 'react'
import Navbar from './Navbar'
import Users from './Users'
import axios from 'axios'

export class App extends Component {

  constructor(props){
    super(props);
    this.state= {
      loading: false,
      users:[]
    }
  }

  componentDidMount() {
    this.setState({loading:true});
    setTimeout(() => {
      axios
      .get('https://api.github.com/users')
      .then(res => this.setState({users:res.data, loading:false}));
    },3000);
    
  }

  render() {
    return (
      <> 
        <Navbar />
        <Users users={this.state.users} loading={this.state.loading} />
      
      </>
      
    )
  }
}

export default App

--App.js--

import React from 'react';
import loading from './loading.gif'

export const Loading = () => {
  return (
    <React.Fragment>
      <img src={loading} alt="Loading..." style={{width:'200px',display:'block', margin:"auto"}} ></img>
    </React.Fragment>
  )
}

--Loading.js--

import React, { Component } from 'react';
import User from './User';
import Loading from './Loading'

export class Users extends Component {
  render() {
    if(this.props.loading){
      return <Loading />
    }else{
      return (
        <div className="container mt-3">
          .<div class="row">
          {this.props.users.map(user => (
            <User user={user} key={user.id} />
          ))}
          </div> 
        </div>
      )
    } 
  }
}

export default Users

--Users.js--

import React, { Component } from 'react'

export class User extends Component {
  constructor(props){
    super(props);
    this.state = {
      id : '68995469',
      name: 'xxx',
      login: 'mbakin',
      avatar_url: "https://avatars.githubusercontent.com/u/68995469?v=4",
      html_url: "https://github.com/mbakin",
      followers: 4,
      blog: "",
    }
  }
  render() {
    const {login,avatar_url,html_url} = this.props.user;
    return (
        <div className="col-md-4 col-sm-6 col-lg-3">
          <div className="card mt-2">
            <img src={avatar_url}  alt="" className="img-fluid"/>           
            <div className="card-body">
                  <h5 className="card-title">{login}</h5>
                  <a href={html_url} className="btn btn-outline-primary btn-sm">Go Profile</a>
            </div>  
          </div>
        </div>
    )
  }
}

export default User

--User.js---

このエラーが発生しました：

エラー: React エラー #130 を縮小しました。https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=にアクセスして完全なメッセージを確認するか、縮小されていない開発環境を使用して完全なエラーと追加の役立つ警告を確認してください。どうすればこれを修正できますか?

4

0 に答える 0