当元素顺序改变时，React 不会正确改变列表

Question

下面有一个列表。

import React from 'react';
import { Marker } from 'react-native-maps';
import { useSelector, useDispatch } from 'react-redux';
import { selectPin } from '../reducers/pinReducer';

const Markers = () => {
    const dispatch = useDispatch();
    const pinsAvailable = useSelector(state => state.pin.allTheAvailablePins);

    return (
        <>
            {pinsAvailable.map((pin, index) => {
                console.log(index === 0) // returns true when index is 0
                return <Marker 
                key={pin.id} 
                coordinate={pin.coords}
                pinColor={index === 0 ? "red" : "green"} // but it doesnt work here...
                onPress={() => dispatch(selectPin({pin}))} />
            })}
        </>
    )
}

export default Markers;

首先，pinsAvailable 变量获取 pin 个对象的数组。一开始它表现得很好。当列表发生变化时（列表没有获取新元素或没有删除某些内容，只有列表的顺序发生变化。）它不像我想要的那样工作。

问题是，在第一次渲染时，它将列表 pinColor 属性的第一个元素渲染为 "red"，其余元素渲染为 "green"。但是在第一次渲染之后，它将每个元素 pinColor 渲染为 "green".

我想要的是知道为什么列表第一个元素在第一次渲染时仅将 pinColor 属性渲染为 "red"，而在其他渲染中为什么不渲染。事实上index === 0returns是真的。列表中唯一的变化就是“元素顺序”。

编辑；

我从代码中的某处调用 fetchRoute。

export const fetchRoute = async (dispatch, location) => {
    if(location){
        const res = await axios.get(`http://192.168.1.98:3000/api/sevkiyat/rotayiciz?lat=${location.latitude}&lon=${location.longitude}`);
        dispatch(setAllThePinsAvailable({pins: res.data.orderedDeliveries})); // orderedDeliveries is array of reordered pins.
        dispatch(setRoutePath({routePath: res.data.lines}));
    }
}

下面的代码是一个 Redux Toolkit 切片。

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
    selectedPin: null,
    deliveryToBeArrived: null,
    allTheAvailablePins: [],
    fetchPinsLoading: true,
    fetchPinsError: null,
}

export const pinSlice = createSlice({
    name: 'pin',
    initialState,
    reducers: {
        unselectPin: (state) => {
            state.selectedPin = null;
        },
        selectPin: (state, action) => {
            state.selectedPin = action.payload.pin;
        },
        startDeliveryToBeArrived: (state, action) => {
            state.deliveryToBeArrived = action.payload.delivery;
        },
        abortDeliveryToBeArrived: (state) => {
            state.deliveryToBeArrived = null;
        },
        setAllThePinsAvailable: (state, action) => {
            state.allTheAvailablePins = action.payload.pins;
            state.fetchPinsLoading = false;
        },
        setFetchPinsError: (state, action) => {
            state.fetchPinsError = action.payload.error;
        }
    },
})

export const { setAllThePinsAvailable, selectPin, unselectPin, startDeliveryToBeArrived } = pinSlice.actions

export default pinSlice.reducer;

下面的代码是主要商店。

import { configureStore } from '@reduxjs/toolkit';
import locationReducer from '../reducers/locationReducer';
import modalReducer from '../reducers/modalReducer';
import pinReducer from '../reducers/pinReducer';
import routeReducer from '../reducers/routeReducer';
import sampleReducer from '../reducers/sampleReducer'

export const store = configureStore({
    reducer: {
        sample: sampleReducer,
        pin: pinReducer,
        location: locationReducer,
        modal: modalReducer,
        route: routeReducer,
    },
    middleware: getDefaultMiddleware => getDefaultMiddleware({
        serializableCheck: false
    })
})

更多编辑：当我给 pinColor 提供十六进制颜色而不是颜色名称时，它是固定的。问题来源来自 react-native-maps 库。

Answer 1

当我给 pinColor 指定十六进制颜色而不是颜色名称时，它是固定的。问题来源来自 react-native-maps 库。

例如："#FF0000" 而不是 "red"

当元素顺序改变时，React 不会正确改变列表

React doesn't change list correctly when order of elements change

reactjs

react-native-maps