React Hooks useState 显示错误

Question

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>
  );
};

react-dom.development.js:55 Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Answer 1

try this:

    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>
      );
    };

Answer 2

let your functions like this

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

the error

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

is because useEffect Hook needs to be outside of the functions for example

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