react开发中遇到的问题-随手记

解决“Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.”

 <button onClick={changeStyle()}>切换地图样式</button>

花括号里写执行函数会导致立即求值。造成react太多的重复渲染。

这里用立即执行函数将其包裹起来，使其只在点击时触发

<button onClick={() => {changeStyle()}}>切换地图样式</button>

React Hook useEffect has missing dependencies: 'map'and 'props.layerId'. Either include them or remove the dependency array.

    useEffect(() => {
       if (props.type === 'raster') {
          ...
              map.removeLayer(props.layerId);
          ...
        }
    }, [props.type]);

这里我们在对父组件传进来的值进行监听的时候，如果函数中包含其他状态变量就会提示你把这些变量也加进监听数组，如果不想出现这个提示可以加上屏蔽语句

  }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.type]);