使用Redux更新特定JSON数组项中的单个值可以通过以下步骤实现:
const initialState = {
items: [
{ id: 1, name: "item 1", value: 0 },
{ id: 2, name: "item 2", value: 0 },
{ id: 3, name: "item 3", value: 0 }
]
};
const itemsReducer = (state = initialState, action) => {
switch (action.type) {
case "UPDATE_ITEM_VALUE":
return {
...state,
items: state.items.map(item =>
item.id === action.payload.itemId
? { ...item, value: action.payload.newValue }
: item
)
};
default:
return state;
}
};
在上述代码中,我们定义了一个名为"UPDATE_ITEM_VALUE"的action类型,它接收一个payload对象,其中包含要更新的项的id和新的值。在reducer函数中,我们使用map函数遍历items数组,找到与给定itemId匹配的项,并将其value属性更新为新的值。
import { createStore } from "redux";
import itemsReducer from "./itemsReducer";
const store = createStore(itemsReducer);
import { useDispatch, useSelector } from "react-redux";
import { updateItemValue } from "./actions";
const items = useSelector(state => state.items);
const dispatch = useDispatch();
const handleItemClick = (itemId, newValue) => {
dispatch(updateItemValue(itemId, newValue));
};
在上述代码中,我们调用了名为"updateItemValue"的action创建函数,并传递要更新的项的id和新的值。
{items.map(item => (
<div key={item.id} onClick={() => handleItemClick(item.id, 1)}>
{item.name} - {item.value}
</div>
))}
在上述代码中,我们使用map函数遍历items数组,并为每个项创建一个div元素。当单击div元素时,调用handleItemClick函数来更新特定项的值。
这样,当你单击列表项时,Redux将会更新特定JSON数组项中的单个值。请注意,上述代码中的action创建函数和reducer函数需要根据你的应用程序的具体需求进行调整。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云