javascript - 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 hookcall. Hooks can only be called inside of the body of a functioncomponent. 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

试试这个:

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