React Ref 对象在第二次调用后自行重置

React Ref objects reset itself after second call

嗨,我正在尝试开发一个使用 ref 的程序。

 let cardsRef = useRef([]);

我正在 useEffect 中创建 ref。

  useEffect(() => {
    cardsRef.current = cards.map((_ref, index) => {
      return cardsRef.current[index] = createRef();
    });
    setInitialize(true);
  }, [cards, isShuffled]);

return (
{cards.map(item => {
        return (
          <div key={item.id}  ref={cardsRef.current[item.id]}>
            {item.value}
          </div>
        );
      })}
)

但是当我在

中更改卡片数组时
  const shuffleArray = (array) => {
    let tempArr = [];
    tempArr = array.sort(() => Math.random() - 0.5);
    setCards(tempArr);
    setIsShuffled(true);
  };

React 找不到 cardsRef.current[index].current。 因为 shuffleArray 函数重置 cardsRef 数组?我猜。

感谢您的帮助。

所以这里有一些需要注意的地方...

  1. createRef 仅在 class 组件中使用。它是您在顶部使用的 useRef 的 class 等价物。

  2. 您不应尝试在效果挂钩内设置新引用。您在组件的主要范围内执行此操作。

  3. 请记住,更改 ref 上的 current 值不会导致重新渲染。我想你想在这里使用状态。将 ref 值视为存储所需数据的位置,但在更改时不应导致 UI 刷新。

如果您需要,我可以解释更多...如果您有任何问题,请告诉我。