Question

我正在学习钩子，并且遇到ref对象的以下问题。运行此代码段时：

  const [offset, setOffset] = useState(0);
  const [maxX, setMaxX] = useState(0);
  const itemRef = React.createRef();

  useEffect(() => {
    if (itemRef.current.childElementCount > 0) {
      setMaxX((itemRef.current.childElementCount / 3) * 
      itemRef.current.offsetWidth - itemRef.current.offsetWidth)
    }
  }, [])

  useEffect(() => {
    itemRef.current.style.transform = `translateX(-${offset}px)`
  }, [offset])

  const shiftSliderRight = () => {
    setOffset(offset => offset + itemRef.current.offsetWidth);
  }

  return (
    <div>
      <div className='page-new-arrivals'>
        <img src={'./static/arrivals_ss19.png'} alt='Arrivals'/>
        <div className='page-new-arrivals__slider_container'>
            <div ref={itemRef} className='page-new-arrivals__slider'>
            <Link to="/itemPage"><Item imgLink='./static/tshirt1.png'/></Link>
            <Item imgLink='./static/tshirt2.png'/>
            <Item imgLink='./static/tshirt3.png'/>

            <Item imgLink='./static/tshirt3.png'/>
            <Item imgLink='./static/tshirt1.png'/>
            <Item imgLink='./static/tshirt2.png'/>
          </div>
          <button onClick={shiftSliderRight}/>
        </div>
      </div>
    </div>
  )
}

我得到Uncaught TypeError: Cannot read property 'style' of null行的itemRef.current.style.transform = `translateX(-${offset}px)

当我在goog开发工具中的该行上放置断点时，我看到它实际上不是null，并且一切都很好，渲染完成后就没有错误了。为什么会这样？

Answer 1

第const itemRef = React.createRef();行在每个渲染器中创建一个不同的ref对象...要使用相同的mutable ref：

const itemRef = useRef();

Answer 2

// const itemRef = React.createRef();
const itemRef = useRef(null);

您需要使用if (itemRef.current)来确定参考是否已初始化。

文档：https://reactjs.org/docs/hooks-reference.html#useref

一篇好文章： https://blog.bitsrc.io/react-useref-and-react-createref-the-difference-afedb9877d0f

react挂钩useEffect和ref对象中的异常行为

2 个答案: