reactで、consoleに何も表示されない

Question

reactでgetできない問題を解決するため、consoleに都邑の処理結果を出力しようとしたところ、consoleすら出てこなくて途方に暮れています。

どうしたら、consoleに、resとdbが表示されれでしょうか?

import React from 'react';
import {
    CardColumns
} from 'react-bootstrap';
import axios from 'axios';

import Big5List from '../components/Big5List.js';

class Big5sRio extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            big5s: []
        };
        this.loadAjax = this.loadAjax.bind(this);
    }
    

    loadAjax(){
        axios.get('http://localhost:5000/big5db/all')
            .then(res => {
                let db = res.data;
                this.setState({
                    big5s: db
                })
                console.log(res)
                console.log(db)
            });
    }

    loadAjax2() {
        try {
            const res = fetch('http://localhost:5000/big5db/all');
            const json = res.json();
            console.log(json)
            this.setState({
                big5s: json
            });
        }
        catch (err) {
            console.error(err);
        }
    }

    render(){
        // const big5ss = this.state.big5s[0].name;
        return(
            <div>
                {this.state.big5s.map((name)=>({name}))}
            </div>   
        )
    } 
}

export default Big5sRio;

Answer 1

次の2点を確認してください。

• そもそもBig5sRioコンポーネントを読み込めているか？
• loadAjaxを実行できているか？（呼び出しているか？）

loadAjaxが実行できていないのであれば、次のメソッドをクラスに追加すれば動くような気がします。

componentDidMount() {
  this.loadAjax()
}