Всем добрый вечер. Есть условный код:
function Parent(){
{routeMarkers} = useAppSelector((state) => state.mapSearch);
return(
<RouteMarkers routeMarkers={routeMarkers} />
)
}
Cildren выглядит так:
export default function RouteMarkers({ routeMarkers }: { routeMarkers: Array<RouteMarkerType> }): JSX.Element[] {
const newRouteMarkers: { current: Array<RouteMarkerType> } = useRef([]);
const _routeMarkers = useRef(routeMarkers);
_routeMarkers.current.forEach((marker, i, arr) => {
const _marker = marker;
const { pointId } = _marker;
const markerIdBeforeHesh = pointId?.match(/^.*(?=#)/i)?.[0];
const arrWithMarkerIdBeforeHesh = arr.filter(
({ pointId }) => pointId?.match(/^.*(?=#)/i)?.[0] === markerIdBeforeHesh,
);
if (arrWithMarkerIdBeforeHesh.length === 1) {
_routeMarkers.current.splice(i, 1);
newRouteMarkers.current.push({ ..._marker, place: 1 });
}
});
return newRouteMarkers.current.map((routeMarker) => <RouteMarker {...routeMarker} key={routeMarker.pointId} />);
}
компонент получает массив с пропсами преобразует его и возвращает массив других компонентов. После того как в поле стора добавляется элемент routeMarker компонент Parent отрисовывает этот маркер. Но при следующей отработке reduccer в него почему то передается состояние где поле routeMarkers уже пустой массив. При этом ни какие экшены связанные с этим поплем не отправлялись в reduccer. Если переписать дочерний компонент вот так:
export default function RouteMarkers({ routeMarkers }: { routeMarkers: Array<RouteMarkerType> }): JSX.Element[] {
return routeMarkers.current.map((routeMarker) => <RouteMarker {...routeMarker} key={routeMarker.pointId} />);
}
стор работает как и ожидается. Не могу понять в чем проблема. Прошу помощи.
_routeMarkers.current.splice(i, 1);
. Хоть редюсер в react и отдает объект, по сути, это все тот же javaScript и идет передача ссылки на объект. Тут вы самостоятельно(в обход ваших экшенов) зануляете данные.