React Hooks useState показывает ошибки - PullRequest
Новая
       5

React Hooks useState показывает ошибки

0 голосов
/ 08 апреля 2020 
import React, { useState, useEffect } from 'react';
import ReactScrollDetector from 'react-scroll-detector';

const DatePicker = ({ count }) => {
  const [countNew, setCount] = useState(count);
  const handleScrollBottom = () => {
    useEffect(() => setCount((countNew = countNew + 12)));
  };

  const handleScrollTop = () => {
    useEffect(() => setCount((countNew = countNew + 12)));
  };

  return (
    <ReactScrollDetector
      debounceTime={500}
      accuracy={90}
      onScrollBottom={handleScrollBottom}
      onScrollTop={handleScrollTop}
    >
      <div style={{ minHeight: '300px', maxHeight: '300px', overflow: 'auto' }}> </div>
    </ReactScrollDetector>
  );
};

реакции-дом.развития. js: 55 Неизученное инвариантное нарушение: недопустимый вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

  1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM)
  2. Возможно, вы нарушаете правила хуков
  3. В одном приложении может быть несколько копий React

Ответы [ 2 ]

2 голосов
/ 08 апреля 2020

попробуйте это: 

    import React, { useState, useEffect } from "react";
    import ReactScrollDetector from "react-scroll-detector";

    const DatePicker = ({count}) => {
      const [countNew, setCount] = useState(count)
      const handleScrollBottom = () => {
          setCount(countNew + 12)
       }
      const handleScrollTop = ()  => {
        setCount(countNew + 12)
     }
      return (
        <ReactScrollDetector
          debounceTime={500}
          accuracy={90}
          onScrollBottom={handleScrollBottom}
          onScrollTop={handleScrollTop}>
          <div style={{ minHeight: "300px", maxHeight: "300px", overflow: "auto" }}> <div>

        </ReactScrollDetector>
      );
    };
1 голос
/ 08 апреля 2020

пусть ваши функции вот так 

const handleScrollBottom = () => setCount(countNew = countNew + 12))
       
const handleScrollTop = ()  => setCount(countNew = countNew + 12))

ошибка 

react-dom.development.js:55 Uncaught Invariant Violation:

потому, что useEffect Hook должен находиться за пределами функций, например 

export default function MyComponent() {
  useEffect(() => {
      
  }, []);
  const bar = () => {};
  const foo = () => {};
  return <div></div>;
}
...