React Toastify - не приходит уведомление об ошибке

Question

Я хочу, чтобы когда я не получаю данных от api, вместо этого Нет данных я хочу, чтобы отображалось уведомление или toast.error.

shop.jsx

import React from 'react';
import './shops.css';
import Shop from './shop'
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
require('dotenv').config()
const TOKEN = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI1ZjFiMjNlYTQxNmJhMjQ3YjQ5MDk4Y2IiLCJlbWFpbCI6Img1aW1icjQ0NGQ7QHR5cC5pbiIsImlhdCI6MTU5NjgxMTU5MSwiZXhwIjoxNTk2ODE1MTkxfQ.UyrUkbNWzenf50FL8AZE1iZaii11P7MwdXpKmoCB9nM";
class Shops extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shops: []
    };
  }
  componentDidMount() {
    console.log(process.env.REACT_APP_BaseURL);
    // replace with correct URL: http://localhost:5000/api/shops/allShops
    fetch(process.env.REACT_APP_BaseURL, {
      method: "get",
      headers: new Headers({
        Authorization: `Bearer ${TOKEN}`
      })
    })
      .then(response =>response.json())
      .then(data => {
        this.setState({ shops: data.fetchedShops });
        toast.success("API LOADED SUCCESSFULLY","SUCCESS");
      })
      .catch(err =>{
        console.log("Error", err);
        if(err){
          toast.error("error occured");
        }
      });
  }
  render() {
    const shops =
      this.state.shops.length > 0 ?
        this.state.shops.map(item => (
          <Shop name={item.shopname} address={item.address} mobile={item.phoneNumber} />
        ))
        : <span >No data</span>;
        console.log(this.state.shops);
    return <div id="container">{shops}</div>;
  }
}
export default Shops;

В 6 строке вы можете увидеть <span >No data</span> вместо этого я хочу уведомление toast.error, но когда я пишу toast.error("No data"); вместо этого диапазона я получил что-то вроде этого вместо уведомления об ошибке

Answer 1

Если вы хотите отметить, что данных нет, когда массив пуст, это необходимо сделать в два этапа, так как render это чистая функция, т.е. без побочных эффектов

1. Выдавать побочный эффект тоста в функциях жизненного цикла компонента, т.е. componentDidMount и / или componentDidUpdate
2. Визуализировать null при отсутствии данных или поскольку карта может без проблем обрабатывать пустые массивы, просто верните пустой массив результатов карты

Код

class Shops extends Component {
  state = {
    shops: []
  };

  checkShops = () => {
    const { shops } = this.state;

    if (!shops.length) {
      toast.error("No Data");
    }
  };

  componentDidMount() {
    this.checkShops(); // not really needed if fetch for data first
  }

  componentDidUpdate() {
    this.checkShops();
  }

  render() {
    const { shops } = this.state;

    return (
      <div id="container">
        {shops.map((item) => <div>Data</div>)}
      </div>
    );
  }
}