React 16.8 hooks - 子组件在更新父状态后不会重新渲染

Question

我有一个Map具有几个状态的功能父组件，其中之一是layers，其值最初是从配置中设置的。

然后我有一个子LayerControl组件，它将地图的图层状态作为其道具。LayerControl 组件进行一些更改并将它们传递回 Map onLayerChange，然后使用 Map调用层 ( setLayers)的 setState 方法。

据我了解，这应该会触发我的 LayerControl 组件的重新渲染，但事实并非如此。我做错了什么？

export default function Map(){

const [viewport, setViewport] = useState(mapConfig.viewport);
const [style, setStyle] = useState(mapConfig.mapStyle);
const [layers, setLayers] = useState(mapConfig.layers);

function updateLayers(layers){
    setLayers(layers); //why won't LayerControl re-render?
}

return(
    <MapGL
        zoom={[viewport.zoom]}
        containerStyle={{
            height: "100%",
            width: "100%"
        }}
        style={style}>
        <LayerControl
            onLayerChange={layers => updateLayers(layers)} 
            layers={layers}
        />
        <ZoomControl/>
        <ScaleControl/>
    </MapGL>
);

}

Answer 1

您是在 LayerController 中创建一个新的图层数组，还是只是在图层数组中添加/删除一个项目？我假设setLayers只进行浅层引用检查以查看是否layers更改，如果您修改数组而不是重新创建它，它将返回 false。因此您的组件不会重新渲染。

例如

// In LayerController

// this mutates the array, but won't trigger a render
layers.push(/* some new layer */);
onLayerChange(layers);

// creates a new array, which should trigger a render
const newLayer = {/* your new layer */};
const newLayers = [...layers, newLayer];
onLayerChange(newLayers)