React 在 useEffect 中需要这个，但不是依赖答案

【问题标题】：React need this in the useEffect but not as a dependencyReact 在 useEffect 中需要这个，但不是依赖
【发布时间】：2021-06-19 12:16:28
【问题描述】：

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

    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]);

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

【问题讨论】：

您以后如何使用renderedItems？如果您不使用它们，请使用 ref 来保存渲染项目的引用
@thedude 我只是用它从地图中删除之前渲染的项目。我不知道 ref 究竟是如何工作的，我要去调查

标签： reactjs react-hooks eslint

【解决方案1】：

弹出警告是正常的，它会检查useEffect中的每个变量/函数，如果你确定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]);

【讨论】：