TypeError: Object(...) не является функцией при использовании response-toastify

Я пытаюсь получить react-toastifyдля работы в приложении, которое я пишу во время онлайн-курса. Я должен установить определенную версию, но я всегда предпочитаю использовать самую последнюю, но когда я это делаю, я получаю множество ошибок.

Я пошел в npmдомашняя страница для React-Toastify, и они предоставляют очень хорошую документацию о том, как ее использовать, и я считаю, что выполнил инструкции как из курса, так иreact-toastify правильно, но я все еще получаю сообщение об ошибке.

Я определил react-toastify в верхней части моего App.js

import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

и я просто вызываю тестовый тост следующим образом:

handleDelete = (post) => {
    toast("deleted");
    // toast.error("deleted");       
}

и в моем методе рендеринга у меня есть <ToastContainer />:

render() {
    return (
       <React.Fragment>
       <ToastContainer />
       <button className="btn btn-error" onClick={this.handleDelete}>
          Delete
       </button>

Когда я нажимаю кнопку удаления, я получаю сообщение об ошибке (ну, на самом деле я получаю их несколько, но это основная):

TypeError: Object(...) is not a function
useToastContainer
..myapp/node_modules/react-toastify/dist/react-toastify.esm.js:866
  863 | }
  864 | 
  865 | function useToastContainer(props) {
> 866 |   var _useReducer = useReducer(function (x) {
  867 |     return x + 1;
  868 |   }, 0),
  869 |       forceUpdate = _useReducer[1];

Собственно, я только что заметил, что мой <ToastContainer /> был закомментирован в моем методе рендеринга, и как только я его раскомментирую, та же ошибка возникает сразу после загрузки моей страницы.

Я что-то упустил или это ошибка? react-notify и версия React Я использую ie 16.4.1?

Источник

4 ответа

Решение

Я также столкнулся с аналогичной проблемой, потому что есть некоторые конфликтующие зависимости с response-toastify в более новых версиях по сравнению с его предшественником.

Кроме того, если вы следуете некоторым курсам, они обычно предоставляют некоторые ресурсы для продолжения, когда вы начинаете работать с этим ресурсом и выполняете npm i для его зависимостей, он устанавливает определенные версии пакета, который указан в файле package.json, поэтому, если вы пытаются установить новый пакет, в рамках курса он может быть несовместим с пакетами, упомянутыми в файлах ресурсов.

  • Поэтому, чтобы избежать конфликта, вы можете вручную установить все пакеты, упомянутые в package.json, с последними версиями, а затем установить последнюю версию response-toastify.

ИЛИ

  • Попробуйте вернуть более раннюю версию response-toastify, возможно, попробуйте response-toastify@4.1 или версию, упомянутую в курсе. (Это сработало для меня)
Источник

Установите старую версию react-toastify, и она будет работать нормально

Источник

Удалите неиспользованный реквизит.

handleDelete = () => {
    toast("deleted");
    // toast.error("deleted");       
}

Или используйте функцию props.

handleDelete = (post) => {
    toast(post);
}

И вызовите свою функцию в функции стрелки.

render() {
    return (
       <React.Fragment>
       <ToastContainer />
       <button className="btn btn-error" onClick={() => {this.handleDelete('deleted')}}>
          Delete
       </button>
       </React.Fragment>
    )
Источник

Для меня сработало создание другого файла для хранения <ToastContainer/>а затем импортируйте его в мой App.js, и он отлично работает. Вот простой пример:

./src/toast.jsx

import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const Toast = () => {
  const errorMessage = () => {
    toast.error("Unexpected error occured");
  };
  return (
    <div>
      <button onClick={errorMessage} className="btn btn-primary">
        Submit
      </button>
      <ToastContainer />
    </div>
  );
};

export default Toast;

./src/App.js

import React, { Component } from "react";
import "./App.css";
import Toast from "./toast";

class App extends Component {
  state = {
  };

  render() {
    return (
      <React.Fragment>
        //Your code...
        <Toast />
      </React.Fragment>
    );
  }
}

export default App;

Однако мое приложение немного сложнее, и в основном у меня есть файл httpServices.js, в котором я использую библиотеку Axios для выполнения HTTP-запросов и выявления ошибок. Так что, если я поймаю ошибку при отправке HTTP-запроса и использую "toast.error("Message")". Я использую новый файл toast.jsx для хранения контейнера для ошибок, и этот контейнер я импортирую в свой App.js.

Источник
Другие вопросы по тегам