元素顺序更改时，React 无法正确更改列表答案

【问题标题】：React doesn't change list correctly when order of elements change元素顺序更改时，React 无法正确更改列表
【发布时间】：2021-10-07 07:19:59
【问题描述】：

我在下面有一个清单。

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 === 0 返回真。列表中唯一的变化就是“元素的顺序”。

编辑；

我从代码中的某处调用 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 库。

【问题讨论】：

如何改变数组元素的顺序？您能否编辑您的问题，向我们展示pinsAvailable 数组发生了什么？
是的，我明白了，谢谢。我只是想确保它不是像array.sort 这样愚蠢的东西。我还刚刚注意到在您的 sn-p 中您没有在映射中返回 Marker，不确定这是否只是复制/粘贴错字。 Marker 是否对道具进行任何类型的缓存/记忆？我们可以看到Marker 组件吗？除此之外，我没有看到任何明显的问题。 pin.id 在重新排序之间是否一致？
您是否有一个正在运行的示例，或者您能否创建一个 running 代码框来重现我们可以实时检查和调试的这个问题？
我们需要minimal reproducible example 来帮助您回答这个问题。无需运行完整的应用程序，只需重现您的错误所需的代码。
react-native-maps 似乎有很多怪癖，这可能就是其中之一。你可能会在他们的 GitHub 问题跟踪器上得到答案。

标签： reactjs react-native-maps

【解决方案1】：

当我给 pinColor 提供十六进制颜色而不是颜色名称时，它已修复。问题来源来自 react-native-maps 库。

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

【讨论】：