React でAPIをfetchしたい

Question

React API 初心者です。

APIをfetchしようとしています。
サンプルコードを見て、下記のように書いてみましたが、
TypeError Failed to fetch となります。

確認すべき箇所をご指摘いただけますと幸いです。

import React, {Component} from 'react'

class App extends Component {
  constructor(props) {
    super(props);
    this.state={
      loading: false
    };
  }

  componentDidMount(){
    return fetch('http://taco-rdz.com/')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          loading: true,
          data: responseJson,
        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

  render() {
    if(this.state.loading){
      return(
        <div className="App-header">
          <p>{ this.state.data }</p>
        </div>
      );
    }else{
      return(
        <div className="App-header">
          <p>Loading...</p>
        </div>
      );
    }
  }
}
  
export default App;

Comments

[hoshi-takanori]

そのコードを動かしてみましたが、fetch そのものは成功しますね。ネットワークの調子が悪かったのでは？
(表示の際にエラーになるので、とりあえず p タグの中の this.state.data　を JSON.stringify(this.state.data) とかにすると良いかも…。)

[hiro_ike]

ご返信が遅くなりすみません。
コメント及びコードの確認ありがとうございます。
fetchするurl内の情報を表示させたかったのですが、この場合、何が不足でしたでしょうか。
ご指摘の箇所は、自分のコードに反映してみました。

[hoshi-takanori]

こちらでは動いてるので、何が不足かは分からないのですが、相変わらずエラーが出てるのでしょうか？
そのコードをどうやって動かしてますか？

[hiro_ike]

codesandboxを利用しているですが、TypeError Failed to fetch エラーがまだ表示されております。
初心者でよくわかっていないため、上記以外何もしていません。他に追記、または設定すべきことありましたでしょうか。度々もうしけありません。
ベストアンサーを差し上げたいので、回答欄に入力いただけますと助かります。

Answer 1

codesandbox だと https のアドレスで動くので、http の url を fetch するとエラーになるようです。
また、結果はとりあえず JSON.stringify で表示すると分かりやすいかも。

   componentDidMount(){
-    return fetch('http://taco-randomizer.herokuapp.com/random/?full-tack=true')
+    return fetch('https://taco-randomizer.herokuapp.com/random/?full-tack=true')
 
   // 略
 
   render() {
     if (this.state.loading) {
       return (
         <div className="App-header">
-          <p>{ this.state.data }</p>
+          <pre>{ JSON.stringify(this.state.data, null, 2) }</pre>
         </div>
       );

Comments

[hiro_ike]

codesandboxのことまでありがとうございます！
表示確認できました。