Блог

Главная - Вопросы по программированию - Совершенно новый проект без какого-либо кода, кроме App.js: Ошибка: Неверный вызов соединения. Крючки могут вызываться только внутри тела компонента функции

Совершенно новый проект без какого-либо кода, кроме App.js: Ошибка: Неверный вызов соединения. Крючки могут вызываться только внутри тела компонента функции

#javascript #reactjs #react-hooks

Вопрос:

При попытке использовать CountdownCircleTimer от react-countdown-circle-timer , я получаю следующие ошибки в своем браузере:

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

У меня есть только следующий код, абсолютно ничего больше, никаких других компонентов в моем проекте React:

 import './App.css';
import { CountdownCircleTimer } from "react-countdown-circle-timer";


function App() {
  return (
    <div className="App">
      <Timer/>
      <CountdownCircleTimer
        isPlaying
        duration={10}
        colors={[
          ["#004777", 0.33],
          ["#F7B801", 0.33],
          ["#A30000", 0.33],
        ]}
      />
    </div>
  );
}

export default App;

Вот как я package.json выгляжу:

 "dependencies": {
    "react": "^17.0.2",
    "react-countdown-circle-timer": "^2.5.4",
    "react-dom": "^17.0.2"
  }

Вот мое index.js досье:

 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Я в недоумении, почему это происходит. Что я могу сделать, чтобы это исправить? Это совершенно новый проект React, и я хотел протестировать этот компонент внутри App.js , прежде чем двигаться дальше.

Спасибо.

Комментарии:

1. Вы неправильно используете крючок в другом компоненте. Может быть <Timer/>

2. На самом деле я удалил этот файл, и я все еще получаю эту ошибку. До этого это был пустой компонент.

3. Здравствуйте, я обновил поток, добавив файл package.json. Кроме того, я тот, кто открыл проблему на github; но, увидев, что вы связаны с этой темой SO, я теперь закрыл ее, так как проблема, похоже, с моей стороны, а не в коде. Спасибо вам за ваш быстрый ответ.

4. Похоже, вы используете те же версии, что и песочница кода, поэтому проблема может заключаться в том, как App используется компонент.

5. Я удалил проект и создал новый. Я не уверен, в чем была проблема раньше, но, возможно, я забыл сделать npm install это перед началом проекта. Приношу свои извинения за это, я все еще новичок и учусь, поэтому совершаю небольшие, но неприятные ошибки, подобные этой. Спасибо, что нашли время помочь мне. ПРАВКА: на самом деле npm install проблема была не в этом. Я действительно понятия не имею, в чем была проблема.

Метки: ,