Реакция 16.8 ловушек - дочерний компонент не будет перерисовываться после обновления родительского состояния - PullRequest
Новая
       5

Реакция 16.8 ловушек - дочерний компонент не будет перерисовываться после обновления родительского состояния

0 голосов
/ 11 февраля 2019

У меня есть функциональный родительский компонент Map с несколькими состояниями, одним из которых является layers, значение которого изначально устанавливается из конфигурации.

Затем у меня есть дочерний компонент LayerControl, который принимает состояние слоев карты в качестве реквизита.Компонент LayerControl вносит некоторые изменения и передает их обратно на карту с помощью onLayerChange, который затем вызывает метод слоев setState (setLayers).

Насколько я понимаю, это должно вызвать повторную визуализацию моего компонента 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>
);

}

1 Ответ

0 голосов
/ 12 февраля 2019

Вы создаете новый массив слоев в 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)
...