- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建了一个简单的购物应用程序,它具有三个屏幕,包括:Home
、Book Store
和 Cart
屏幕
我正在使用 redux 来更新所有状态,除了一件事之外,一切都运行顺利。我希望用户在点击 Cart
中的项目时,它们会被一一删除,但问题是,当我单击一个项目时,所有项目都会同时被删除
我该如何解决这个问题?
reducer 代码:
import {
ADD,
REMOVE
} from '../actions/types';
const initialState = {
items: [],
counter: 0
}
export const cardReducer = (state = initialState, action) => {
switch (action.type) {
case ADD:
return {
...state, items: state.items.concat({
name: action.payload.name,
index: Math.random(),
price: action.payload.price,
id: action.payload.id
}), counter: state.counter + 1 }
break;
case REMOVE:
return {
...state,
items: state.items.filter((item) => {
item.index !== action.payload
}), counter: state.counter - 1 }
break;
default:
return state;
}}
操作代码:
import {
ADD,
REMOVE
} from './types';
export const addSomething = (item) => {
return {
type: ADD,
payload: item
}}
export const removeSomething = (index) => {
return {
type: REMOVE,
payload: index
} }
这是购物车
屏幕代码:
import { useDispatch, useSelector } from 'react-redux';
import { addSomething, removeSomething } from '../actions';
const Cards = (props) => {
const { navigation } = props;
const dispatch = useDispatch();
const items = useSelector(state => state.cardR.items)
return (
<View style={{ alignItems: 'center', flex: 1 }}>
<View style={{ width: '80%' }}>
<FlatList
data={items}
keyExtractor={(item, index) => index}
renderItem={({ item, index }) => (
<TouchableOpacity
style={styles.button}
activeOpacity={0.7}
onPress={(index) => dispatch(removeSomething(item.index))}
>
<Text style={{ color: 'white' }}>{item.name}</Text>
<Text style={{ color: 'white' }}>{item.price}</Text>
</TouchableOpacity>
)} />
</View>
</View>
)}
最佳答案
问题出现在 index
属性中,同样 @giotskhada 在他的回复中也提到了。可能的解决方案是使用其 id
而不是索引来检查可移动项目,索引已经存在以唯一标识每个项目。
试试这个 -
reducer 代码:
case REMOVE:
return {
...state,
items: state.items.filter((item) => {
return item.id !== action.payload // Id instead of index and return statement
}),
counter: state.counter - 1
}
break;
购物车屏幕代码:
<TouchableOpacity
style={styles.button}
activeOpacity={0.7}
onPress={(index) => dispatch(removeSomething(item.id))}> // id instead of index
<Text style={{ color: 'white' }}>{item.name}</Text>
<Text style={{ color: 'white' }}>{item.price}</Text>
</TouchableOpacity>
关于javascript - 我无法通过在React Native中单击redux来从FlatList中一一删除项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60579098/
我想为我指定的每个类别 ID 检索最新帖子的 mongo 选择器。 这是 forumTopics 集合中对象的示例: { _id: ..., createdTime: [unix ep
我正在尝试一个接一个地运行两个ajax 请求。所以,我可以使用 ajax success() 函数: $.ajax({ ... success: function() {
这是我的 Codepen 链接:resizable event 我正在使用可调整大小的 Jquery UI,一切正常,但现在我希望每个 block 上的可调整大小事件只能一个接一个地激活,如果单击另一
我在 Kotlin 上使用 MongoDB 和 Spring,我希望我的应用程序在启动时填充 MongoDB 集合。 (并在每次启动时清洁它) 我的问题是,如果我正在填充的某些数据有问题,我该如何一一
我有一些元素的列表,我想要一个接一个的 fadeIn 元素,意味着如果第一个元素完成 fadeIn 然后下一个元素 fadeIn 等等,在我给定的代码中我不知道出了什么问题,请帮助我.. HTML A
正如很多地方所说,对于大小为 10000 的输入数据,批量预测整个数据比逐行预测要快得多(在这两种情况下,model.n_jobs=1)。 我知道一对一的解决方案有很多开销。但是在在线服务中,请求是一
我在使用 5 个 div 元素使其响应时遇到了问题。 我有这样的 div 元素: Here Image 1 Here Image 2 Here
我是一名优秀的程序员,十分优秀!