Обновления компонентов, хотя реквизиты не изменились - PullRequest
Новая
       33

Обновления компонентов, хотя реквизиты не изменились

1 голос
/ 05 марта 2019

У меня есть компонент MapBox, который получает данные от родительского компонента.

Я стараюсь не обновлять компонент каждый раз, когда в родительском компоненте происходит изменение состояния.Даже еслиComponentUpdate регистрирует те же реквизиты, он обновляет ...

enter image description here Карта дочернего элемента 

    componentDidMount(){
        if(this.props.data.features !== null){
            this.fetchMap();
        }
    }

    shouldComponentUpdate(nextProps) {
        console.log('now:', this.props.data)
        console.log('next', nextProps.data)
        if (this.props.data === nextProps.data) {
            return false;
        }
        if (this.props.data !== nextProps.data) {
            return true;
        }
        return false;
    }
    componentDidUpdate(prevProps) {
        if (this.props.data !== prevProps.data) {
            this.fetchMap();
        }
    }
    fetchMap() {
        const { data } = this.props
        const map = new mapboxgl.Map({
            container: this.mapContainer,
            style: 'mapbox://styles/mapbox/light-v9',
            center: [8.32, 60.44],
            zoom: 5,
        })

        map.on('load', () => {

                map.addSource('locations', {
                    type: 'geojson',
                    data
                });
        });
    }

   .... render and return bla bla

Родитель: 

const Parent () => {
   const [state, change] = useState(false)
   return (
     <Button onClick={change(!state)}>Sorter</Button> // click and <Map> rerenders
     <Map setDraw={setDraw} data={geojson} />
   )
}

1 Ответ

0 голосов
/ 05 марта 2019

У меня есть 3 способа реализовать это

1 родительское состояние вызова использует функцию обратного вызова, которая принудительно переводит объект в новый. 

this.setState((state) => { 
return  {...state};
 });

вы можете проверить этот API в: https://reactjs.org/docs/react-component.html#setstate

2 глубокое сравнение означает, что вам нужно проверять элемент в массиве один за другим. Или, если я нарушу, я превращу массив или объект в строку, а затем сравню.

3 вы можете создатькомпонент для каждого элемента в массиве, а затем сравнить разницу в каждом компоненте. 

const geojson = {
    id:0,// +1 when changed
    type: "FeatureCollection",
    features: locations
};

shouldComponentUpdate(nextProps) {// becacuse nextProps are always a different object from props
    if (this.props.data.id === nextProps.data.id) {
      return false;
    }else{
      return true;
    }
}
...