主页 / 问题 / 1234274
Accepted
Coretex
Asked:2022-01-21 19:25:30 +0000 UTC2022-01-21 19:25:30 +0000 UTC

引用更改时未调用 useEffect

  • 772

当钩子变量改变useRef时，它不会被调用useEffect

变量：

    const [hiddenLayers, setHiddenLayers] = useState([])
    
    const hiddenLayersRef = useRef([createHiddenLayerElement(1)])

功能：

    function addLayer(key) {
        let hiddenLayersTemp = hiddenLayersRef.current
        let elementIndex = hiddenLayersTemp.findIndex(layer => {
            return layer.key === key
        })

        hiddenLayersTemp.splice(elementIndex + 1, 0, createHiddenLayerElement(0))
        
        hiddenLayersRef.current = hiddenLayersTemp
    }

    useEffect(() => {
        console.log('test')
        setHiddenLayers([...hiddenLayersRef.current])
    }, [hiddenLayersRef])

但是'test'只有在网站启动的时候才会显示，之后调用该函数就addLayer不起作用useEffect了。为什么会发生这种情况，我该如何解决？

javascript

2 个回答

  1. Best Answer

    useRef仅当在依赖项数组中传递的依赖项发生变化时才会state调用它。useEffectstatestateuseEffect

    const [counter, setCounter] = useState(1);

const addCounter = () => {
   setCounter(2); // эта функция вызывает `useEffect` так как `state` обновился.
}

    _

    const counter = useRef(1);

const addCounter = () => {
   counter.current = 2; // эта не вызывает `useEffect` так как в `state` нет изменений.
}

    示例：https ://codesandbox.io/s/recursing-leaf-5cimg?file=/src/App.js

    • 3

  2. useEffect当依赖的值在下一次调用 . 时发生变化时触发。同时，它只检查值本身，不对传递给它的对象进行浅比较或深比较。那些。在您的情况下，它将在hiddenLayersRef.

    useRef反过来，它会在每次调用时为您提供相同的对象。

    如果你需要得到调用 change 的效果hiddenLayersRef.current，那么这样写：

    useEffect(() => {
    console.log('test')
    setHiddenLayers([...hiddenLayersRef.current])
}, [hiddenLayersRef.current])

    此外，要调用效果，您需要useEffect使用新的依赖值进行调用，即 组件重新渲染。那些。更改的代码hiddenLayersRef.current（调用 your addLayer(key)）必须直接或触发组件本身或其父级的重新呈现。没有调用 - 没有具有新依赖值的渲染器 - 没有新效果。

    • 0

相关问题