reactjs - 为什么我无法使用 react useState 在任何函数中访问此状态？

Question

我正在尝试访问函数内当前滚动位置的值。这两个参数工作正常并且可以评估，但是当我使用 scrollPos 状态时，它显示未定义，但我可以在函数之外看到它的实际值。如何在函数内部访问它。我正在使用 react-dnd 来实现拖放和 react-pdf 来显示 react pdf

  import { useDrag, useDrop } from 'react-dnd';
  import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';

  const [scrollPos, setScroll] = useState();
  const containerRef = useRef();
  const [addedFields, setAddedFields] = useState([]);

  const handleScroll = (event) => {
    const { scrollHeight, scrollTop, clientHeight } = event.target;
    const scroll = scrollHeight - scrollTop - clientHeight;
    const intScroll = parseInt(scroll, 10);
    setScroll(1470 - intScroll);
  };

  const [, drop] = useDrop(() => ({
    accept: 'card',
    drop: (item, monitor) => {
      const offset = monitor.getSourceClientOffset();
      if (offset && containerRef.current) {
        const dropTarget = containerRef.current.getBoundingClientRect();
        markField(item, {
          x: offset.x - dropTarget.left,
          y: offset.y - dropTarget.top,
        });
      }
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  }));

  console.log('Outer', scrollPos);                      // someValue

  const markField = (item, cordinates) => {
    console.log('Inner', scrollPos);                    // undefined
    const fieldDetails = {
      url: item.url,
      id: item.id + 1,
      cordinates: {
        x: 490 + cordinates.x,
        y: 665 + cordinates.y + window.scrollY,
      },
    };
    // Set fields
    setAddedFields((state) => ([...state, fieldDetails]));
  };

  const renderDoc = () => (
  <div style={{ overflowY: 'scroll' }} onScroll={handleScroll}>
  <Grid container justify="center" style={{ position: 'relative' }}>
    <Document
      file={acceptedFiles[0]}
      onLoadSuccess={onDocumentLoadSuccess}
      renderMode="canvas"
    >
      <Grid ref={drop} container style={{ height: '1080px', position: 'relative' }} justify="center">
        {[...Array(numPages).keys()]
          .map((x, i) => i + 1)
          .map((page) => (
            <Page
              key={page}
              renderAnnotationLayer
              renderInteractiveForms
              pageNumber={page}
              width={windowWidth * 0.6}
              scale={1}
            />
          ))}
        {addedFields.length > 0 && addedFields.map((field) => ([
          <DraggableField id={field.id} url={field.url} cordinates={field.cordinates} />,
        ]))}
      </Grid>
    </Document>
  </Grid>
</div>);