useRef 数组元素未定义 / null 以一种奇怪的方式

Question

When I press Prev, the useRef Array is not undefined: proof of prev is not undefined

But, when I press Next, the useRef Array is null: proof of null when next is pressed

Both buttons run the same function on click (atleast till the console.log) but give different results.

I've tried running them in different order and everything else that comes to mind.

Any help is appreciated.

import React, { Suspense, useRef, useEffect, useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

import BlankPageFlip from "./BlankPageFlip";

const App = () => {
  const refs = useRef([]);

  const numPages = 10;

  const pagesArr = [];

  let currentPage = 0;

  const [playing, setPlaying] = useState(false);
  const speed = Math.PI / 1000;

  const playAnim = (dir) => {
    console.log(refs.current); <------ THIS CONSOLE LOG

    if (refs.current[currentPage]) {
      setPlaying(dir);

      if (dir) currentPage++;
      else currentPage--;

      if (currentPage < 0) currentPage = 0;
      if (currentPage === numPages) currentPage = numPages - 1;
    }
  };

  useEffect(() => {
    for (let i = 0; i < numPages; i++) {
      pagesArr.push(
        <BlankPageFlip
          key={i}
          ref={(el) => (refs.current[i] = el)}
          position={[-1, 0.02 * i, 0]}
        />
      );
    }
  });

  const Pages = () => {
    useFrame(() => {
      if (playing) {
        if (refs.current[currentPage]) {
          if (refs.current[currentPage].rotation.z < Math.PI - 0.03) {
            refs.current[currentPage].rotation.z += speed;
          }
        }
      } else {
        if (refs.current[currentPage]) {
          if (refs.current[currentPage].rotation.z > 0) {
            refs.current[currentPage].rotation.z -= speed;
          }
        }
      }
    });

    return pagesArr;
  };

  return (
    <>
      <div className="NavButtons">
        <button className="prev" onClick={() => playAnim(false)}>
          Prev
        </button>
        <button className="next" onClick={() => playAnim(true)}>
          Next
        </button>
      </div>
      <Canvas
        className="canvas"
        colorManagement
        camera={{ position: [0, 3.7, 0], fov: 60, far: 50 }}
      >
        <ambientLight intensity={2.0} />
        <Suspense fallback={null}>
          <Pages />
          <OrbitControls />
        </Suspense>
      </Canvas>
    </>
  );
};

export default App;

Answer 1

So apparently, useState is not something you should use while doing this. I removed useState and now I just use it as a let bool. It works as intended now.