React 在 useEffect 中需要它，但不作为依赖项

Question

我需要关于如何解决这个问题的意见。我有以下代码：

    const {map, items} = props;
    const [infoWindow, setInfoWindow] = useState(null);
    const [renderedItems, setRenderedItems] = useState([]);

    useEffect(() => {
        const open = (marker, content) => {
            infoWindow.close();
            infoWindow.setContent(content)
            infoWindow.open(map, marker);
        } 

        if(map && items){
            renderedItems.forEach(e => e.setMap(null));
            const newRender = [];
            items.forEach(e => {
                const newMarker = new window.google.maps.Marker({
                    position: e.location
                });
                    
                if(e.content){
                    newMarker.addListener("click", () => open(newMarker, e.content));
                }
                
                newRender.push(newMarker);
                newMarker.setMap(map);
            });
    
            setRenderedItems(newRender);
        }
    }, [map, items, infoWindow]);

我一直收到反应警告，即 renderedItems 应该在依赖项中。如果我这样做，这将无休止地呈现，但我不能把它从这里拿走。因为我需要保存这个新创建的标记的引用

Answer 1

弹出警告是正常的，它会检查你的 useEffect 中的每个 variable/function，如果你确定你不需要在 renderedItems 更改时触发它你可以禁用它：

    useEffect(() => {
        const open = (marker, content) => {
            infoWindow.close();
            infoWindow.setContent(content)
            infoWindow.open(map, marker);
        } 

        if(map && items){
            renderedItems.forEach(e => e.setMap(null));
            const newRender = [];
            items.forEach(e => {
                const newMarker = new window.google.maps.Marker({
                    position: e.location
                });
                    
                if(e.content){
                    newMarker.addListener("click", () => open(newMarker, e.content));
                }
                
                newRender.push(newMarker);
                newMarker.setMap(map);
            });
    
            setRenderedItems(newRender);
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [map, items, infoWindow]);

React 在 useEffect 中需要它，但不作为依赖项

React need this in the useEffect but not as a dependency

reactjs

eslint

react-hooks