reactでweb apiの使用方法

Question

web apiであるURLを用いることができません。
以下に該当するコードを載せさせていただきます。ご助力よろしくお願いします。。。

import React, { Component } from 'react';
import Header from './containers/Header';
import Main from './containers/Main';

const endPoint = new URL(process.env.REACT_API_PATH);

class App extends Component {
  constructor(props){
        super(props);
        this.state ={
          id: '',
          title: '',
          description: '',
          price: '',
          image: '',
          data: []
        };
        this.handleGetProduct = this.handleGetProduct.bind(this);
        this.handlePost = this.handlePost.bind(this);
      }

      handleGetProduct(keyword){
        let url = endPoint;
        if(keyword){
          url = endPoint+ '/search?keyword=' + keyword;
        }
        fetch(url, {
          method: "GET",
          headers: {
           "Content-Type": "application/json"
          }
        }).then(response => {
          response.json().then(data => {
            (this.setState({data:data}))
         })
        })
      }

      handlePost(event, title, description, price){
        fetch(endPoint, {
            method: "POST",
            headers:{
              "Content-Type": "application/json"
              },
            body: JSON.stringify({title: title, description: description, price: price, image: null})
        })
        .then(response => {
          response.json().then(() => {
              this.handleGetProduct()
          })
        })
      }
        


  render() {
    const products = this.state.data;
    return (
      <div className="App">
        <Header/>
        <Main onGet={this.handleGetProduct.bind(this)} onPost={this.handlePost.bind(this)} products={products}/>
      </div>
    );
  }
}

export default App;

.envファイルの中身について

REACT_API_PATH='http://localhost:8080/api/product'
REACT_GITHUB_PATH='https://localhost:8080/github/login'
REACT_GITHUB_LOGOUT_PATH='https://localhost:8080/github/logout'

errorメッセージについて

Failed to construct 'URL': Invalid URL

Comments

[noka_blank]

Reactのインストールはcreate-react-appなどのツールを用いましたでしょうか？
再現がしたいと思い聞きました。

[naonao11]

ありがとうございます、はい用いました。

[naonao11]

またjavascriptファイル内でconsole.log(process.env.REACT_API_PATH)するとundefinedとなりました。

Answer 1

おそらく、process.envによる変数の読み込みが失敗してるものと存じます。

create-react-appを利用されてるとのことで、こちらの記事を参照いただいてもよろしいですか？
https://qiita.com/zgmf_mbfp03/items/008436c5749d65f96e55