React Native 是不是我的函数有什么问题,它会返回属性不可配置?

c2e8gylq  于 2023-04-22  发布在  React
关注(0)|答案(1)|浏览(113)

我使用redux工具包创建了userSlice,当向状态数组中添加项目时,返回上一个屏幕时会给予以下错误。

TypeError: property is not configurable

This error is located at:
    in VirtualizedList (created by FlatList)
...

这是我当前的userSlice:

import { createSlice } from '@reduxjs/toolkit'

const initialStateVal = {
  cars: [],
}

const userSlice = createSlice({
  name: 'user',
  initialState: initialStateVal,
  reducers: {
    addNewCar: (state, action) => {
      state.cars.push(action.payload)
      //state.cars = [...state.cars, action.payload]
    },
    deleteCar: (state, action) => {
      state.cars = state.cars.filter((car) => car.license !== action.payload)
    },
  },
})

export const {
  addNewCar,
  deleteCar,
} = userSlice.actions

export default userSlice.reducer

在我的添加项屏幕中,我调用addItem如下:

const addCar = () => {
    if (car.length > 0 && insurance.length > 0) {
      dispatch(
        addNewCar({
          license: car,
          insurance: insurance,
          traffic: trafficChecked,
          osaKaskochecked: osaKaskochecked,
          täysKaskochecked: täysKaskochecked,
        })
      )
      setCar('')
      setInsurance('')
      setValid(true)
      navigation.goBack()
      carAddedToast()
    } else {
      setValid(false)
    }
  }

然后在我从state获取汽车数组并将其显示在flatlist组件中的组件中:

const cars = useSelector((state) => state.user.cars)
{cars !== null ? <FlatList
            style={{ marginTop: 10 }}
            data={cars}
            keyExtractor={(item) => item.id}
            renderItem={({ item }) => {
              return (
                <View style={licenseContainer}>
                  <View
                    style={{
                      flexDirection: 'column',
                      justifyContent: 'center',
                      width: editCars ? '20%' : '25%',
                    }}
                  >
                    <Text
                      style={{
                        color: colors.white,
                        fontSize: 14,
                        textAlign: 'left',
                      }}
                    >
                      Rek.nro
                    </Text>
                    <Text key={item.license} style={carText}>
                      {item.license}
                    </Text>
                    <View style={horizontalDivider} />
                    <Text
                      style={{
                        color: colors.white,
                        fontSize: 14,
                        textAlign: 'left',
                      }}
                    >
                      Vakuutus
                    </Text>
                    <Text key={item.insurance} style={carText}>
                      {item.insurance}
                    </Text>
                  </View>
                  <View
                    style={{
                      flexDirection: 'column',
                      justifyContent: 'center',
                      width: editCars ? '24%' : '25%',
                    }}
                  >
                    <Text
                      style={{
                        color: colors.white,
                        fontSize: 14,
                        textAlign: 'center',
                      }}
                    >
                      Liikenne
                    </Text>
                    <CheckBox
                      center
                      key={item.traffic}
                      Component={TouchableWithoutFeedback}
                      size={30}
                      uncheckedColor={colors.white}
                      checkedColor={colors.red}
                      checked={item.traffic}
                    />
                  </View>
                  <View
                    style={{
                      flexDirection: 'column',
                      justifyContent: 'center',
                      width: editCars ? '24%' : '25%',
                    }}
                  >
                    <Text
                      style={{
                        color: colors.white,
                        fontSize: 14,
                        textAlign: 'center',
                      }}
                    >
                      Osakasko
                    </Text>
                    <CheckBox
                      center
                      key={item.osaKaskochecked}
                      Component={TouchableWithoutFeedback}
                      size={30}
                      uncheckedColor={colors.white}
                      checkedColor={colors.red}
                      checked={item.osaKaskochecked}
                    />
                  </View>
                  <View
                    style={{
                      flexDirection: 'column',
                      justifyContent: 'center',
                      width: editCars ? '24%' : '25%',
                    }}
                  >
                    <Text
                      style={{
                        color: colors.white,
                        fontSize: 14,
                        textAlign: 'center',
                      }}
                    >
                      Täyskasko
                    </Text>
                    <CheckBox
                      center
                      key={item.täysKaskochecked}
                      Component={TouchableWithoutFeedback}
                      size={30}
                      uncheckedColor={colors.white}
                      checkedColor={colors.red}
                      checked={item.täysKaskochecked}
                    />
                  </View>
                  {editCars ? (
                    <View
                      style={{
                        flexDirection: 'column',
                        justifyContent: 'center',
                        width: editCars ? '10%' : null,
                      }}
                    >
                      <Ionicons
                        name='ios-close-circle-outline'
                        size={30}
                        color={colors.black}
                        style={removeIcon}
                        onPress={() => removeCar(item.license)}
                      />
                    </View>
                  ) : null}
                </View>
              )
            }}
            ItemSeparatorComponent={() => {
              return <View style={divider} />
            }}
          /> : null}

为什么会发生此错误?
我也试着用

addNewCar: (state, action) => {
      state.cars.push(action.payload) // Shouldn't this be fine though?
      //state.cars = [...state.cars, action.payload] <-- tried this but same result
    },

然后我还添加了null检查,但这也没有帮助。

mtb9vblg

mtb9vblg1#

好的,我找到问题了。在我的平面列表组件中,我有

keyExtractor={(item) => item.id}

这是不需要在那里所有和项目也没有id。所以我删除了它,一切都工作正常现在。

相关问题