在React / Redux中添加/更新深度对象数组,可以通过以下步骤实现:
// actions.js
export const addOrUpdateArray = (array) => {
return {
type: 'ADD_OR_UPDATE_ARRAY',
payload: array
};
};
// reducers.js
const initialState = {
deepArray: []
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_OR_UPDATE_ARRAY':
// 使用深度复制的方式来添加或更新深度对象数组
const newArray = JSON.parse(JSON.stringify(state.deepArray));
action.payload.forEach((item) => {
const index = newArray.findIndex((obj) => obj.id === item.id);
if (index !== -1) {
// 更新已存在的对象
newArray[index] = item;
} else {
// 添加新的对象
newArray.push(item);
}
});
return {
...state,
deepArray: newArray
};
default:
return state;
}
};
export default reducer;
// YourComponent.js
import React from 'react';
import { connect } from 'react-redux';
import { addOrUpdateArray } from './actions';
class YourComponent extends React.Component {
// ...
handleAddOrUpdateArray = () => {
const deepArray = [
{ id: 1, name: 'Object 1' },
{ id: 2, name: 'Object 2' },
// ...
];
this.props.addOrUpdateArray(deepArray);
};
render() {
// ...
}
}
const mapStateToProps = (state) => {
return {
deepArray: state.deepArray
};
};
const mapDispatchToProps = {
addOrUpdateArray
};
export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);
这样,当你调用handleAddOrUpdateArray方法时,Redux store中的deepArray将会被更新或添加新的深度对象数组。
关于React和Redux的更多信息,你可以参考以下链接:
请注意,以上答案中没有提及任何特定的腾讯云产品,因为问题并没有涉及到与云计算相关的具体需求。如果你有特定的云计算需求,可以提供更多细节,我可以为你推荐适合的腾讯云产品。
领取专属 10元无门槛券
手把手带您无忧上云