反应16.8钩 - 更新父状态后，子组件将不会重新渲染

Question

我有少数几个州，其中一个是Map，它的值被初始设置从一个配置的功能性亲layers组件。

然后我有一个孩子LayerControl部件这需要在地图作为其道具的层的状态。所述LayerControl组件使一些变化，并将它们传递回与onLayerChange地图，其随后调用层（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)