我使用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检查,但这也没有帮助。
1条答案
按热度按时间mtb9vblg1#
好的,我找到问题了。在我的平面列表组件中,我有
这是不需要在那里所有和项目也没有id。所以我删除了它,一切都工作正常现在。