Не хочет выводить элементы fetch API

Question

import  React, { Component } from 'react';


import 'bootstrap/dist/css/bootstrap.min.css';
import './Home.css';
import {Button,Card} from 'react-bootstrap';

 
 export  class ListProduct extends Component{
   constructor(props) {
     super(props);
     this.state = {
       error:null,
       isLoaded:false,
       items:[]
     };
    }

    componentDidMount (){
      fetch("www.themealdb.com/api/json/v1/1/search.php?s=Arrabiata ")
      
      .then(res=>res.json())
      .then(
        (result) =>{
          this.setState({
            isLoaded:true,
            items:result.meals
          });
        },
        (error) =>{
          this.setState({
            isLoaded:true,
            error
          })
        }
      )
      
      
     
    
    }
     
    render() {
      const {error,isLoaded,items} = this.state;
      if(error){
        return<p>Error {error.massage}</p>
      }else if(!isLoaded){
        return<p>Loading...</p>
      }else{
        return(
          <ul>
        {items.map(item=>(
              <li key={item.name}>
                {item.idMeal}
              </li>
            ))}
          </ul>
      )
    }
   }
  }

Answer 1

Ошибка в данной строке:

fetch("www.themealdb.com/api/json/v1/1/search.php?s=Arrabiata ")

Должно быть:

fetch("https://www.themealdb.com/api/json/v1/1/search.php?s=Arrabiata")

Рабочий код:

class ListProduct extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
    };
  }

  componentDidMount() {
    fetch("https://www.themealdb.com/api/json/v1/1/search.php?s=Arrabiata")
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.meals,
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error,
          });
        }
      );
  }

  render() {
    const { error, isLoaded, items } = this.state;
    console.log(`items`, items);
    if (error) {
      return <p>Error {error.massage}</p>;
    } else if (!isLoaded) {
      return <p>Loading...</p>;
    } else {
      return (
        <ul>
          {items.map((item) => (
            <li key={item.name}>{item.idMeal}</li>
          ))}
        </ul>
      );
    }
  }
}

// export default ListProduct;

ReactDOM.render(<ListProduct />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

Или делайте экспорт по дефолту:

 export default class ListProduct extends Component{

Или импортируйте конкретный компонент

import {ListProduct} from "./components/ListProduct";

БЛОГ НА HUSL

Не хочет выводить элементы fetch API

Ответы (2 шт):