在我的组件中呈现存储中的对象数组，并在使用调度程序调用 onPress 时更改对象中的值

Question

所以我有一个虚拟数据，它是一个作为初始状态的对象数组。 每个对象都有一个值 id、name 和 checked(布尔值和初始假值(。我有一个操作，它映射这个对象，并在给定 item.id 的情况下将检查值更改为 true。然后在我的组件中，我使用map将这些对象渲染为可触摸的不透明度，然后按调度该操作。我放了一个控制台.log(item.id，'is'，item.checked(来查看check的值是否更改，但它只是一直记录false。

将检查从 false 更改为 true 的逻辑首先在化简器中，所以我将其移动到操作中，但它仍然不起作用。

这是减速器，

const initialState = {
items: [
{
id: 1,
itemName: 'Plastic',
checked: false,
},
{
id: 2,
itemName: 'Papers',
checked: false,
},
{
id: 3,
itemName: 'Pet Bottle',
checked: false,
},
],
};
export default (state = initialState, action) => {
switch (action.type) {
case TOGGLE_ITEM:
return {
...state,
items: action.checked,
};
default:
return state;
}
};

那么我的行动是，

const toggleItemHelper = (items, itemId) => {
items.map(item =>
item.id === itemId ? {...item, checked: !item.checked} : item,
);
};
export const toggleItemAction = itemId => (dispatch, getState) => {
const items = getState().items;
return dispatch({
type: TOGGLE_ITEM,
checked: toggleItemHelper(items, itemId),
});
};

那么我的组件是，

import {toggleItemAction} from '../../../../../redux/GarbageItem/action';
const GarbageItem = () => {
const Icon = createIconSetFromFontello(fontelloConfig);
const items = useSelector(state => state.garbageItem.items);
const dispatch = useDispatch();
const toggleItem = itemId => dispatch(toggleItemAction(itemId));
return (
<View style={styles.garbageItemsContainer}>
{items.map(item => (
<TouchableOpacity
key={item.id}
style={styles.itemContainer}
onPress={() => {
toggleItem.bind(this, item.id);
console.log(item.id, 'is', item.checked);
}}>
<View style={styles.checkBoxContainer}>
<Text>
<Icon
name="uncheckedCheckBox"
size={20}
color={colors.gomiGray}
/>
</Text>
</View>
<Text style={styles.itemLabel}>{item.itemName}</Text>
</TouchableOpacity>
))}
</View>
);
};
export default GarbageItem;

期望控制台.log在按下可触摸不透明度时显示 item.id"is"，但无论我按多少次它，它都会一直显示假。

我实际上得到了一个建议，即getState是反模式的，因此，如果我可以在useSelector中更改check的值，然后调度一个将旧对象替换为更新对象的操作，那将是惊人的。

Answer 1

我能够通过在组件中将检查：false更改为true的逻辑来解决它，而不是在操作中执行此操作.js :D

这是现在的新代码，

还原剂

const initialState = {
items: [
{
id: 1,
itemName: 'Plastic',
checked: false,
},
{
id: 2,
itemName: 'Papers',
checked: false,
},
{
id: 3,
itemName: 'Pet Bottle',
checked: false,
},
],
};
export default (state = initialState, action) => {
switch (action.type) {
case TOGGLE_ITEM:
return {
...state,
items: action.newItems,
};
default:
return state;
}
};

行动

export const toggleItemAction = newItems => dispatch => {
return dispatch({
type: TOGGLE_ITEM,
newItems,
});
};

索引.js

const GarbageItem = () => {
const Icon = createIconSetFromFontello(fontelloConfig);
const currentItems = useSelector(state => state.garbageItem.items);
const dispatch = useDispatch();
const toggleItem = newItems => dispatch(toggleItemAction(newItems));
const checkItem = (items, itemId) => {
return items.map(item =>
item.id === itemId ? {...item, checked: !item.checked} : item,
);
};
return (
<View style={styles.garbageItemsContainer}>
{currentItems.map(item => (
<TouchableOpacity
key={item.id}
style={styles.itemContainer}
onPress={() => {
const newItems = checkItem(currentItems, item.id);
toggleItem(newItems);
console.log(item.id, 'is', item.checked);
}}>
<View style={styles.checkBoxContainer}>
<Text>
<Icon
name="uncheckedCheckBox"
size={20}
color={colors.gomiGray}
/>
</Text>
</View>
<Text style={styles.itemLabel}>{item.itemName}</Text>
</TouchableOpacity>
))}
</View>
);
};