在React Redux中更新id-key值对的state对象,可以通过以下步骤实现:
const initialState = {
data: {
1: { id: 1, key: 'value1' },
2: { id: 2, key: 'value2' },
// 其他id-key值对
}
};
export const updateData = (id, key, value) => ({
type: 'UPDATE_DATA',
payload: { id, key, value }
});
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_DATA':
const { id, key, value } = action.payload;
return {
...state,
data: {
...state.data,
[id]: {
...state.data[id],
[key]: value
}
}
};
default:
return state;
}
};
import React from 'react';
import { connect } from 'react-redux';
import { updateData } from './actions';
const MyComponent = ({ data, updateData }) => {
const handleUpdate = (id, key, value) => {
updateData(id, key, value);
};
return (
<div>
{/* 渲染数据和更新数据的逻辑 */}
</div>
);
};
const mapStateToProps = state => ({
data: state.data
});
const mapDispatchToProps = {
updateData
};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
这样,当调用handleUpdate函数时,会触发updateData action,从而更新state中的id-key值对。
对于这个问题,腾讯云没有特定的产品或链接地址与之相关。以上是一个通用的React Redux中更新id-key值对的state对象的方法。
领取专属 10元无门槛券
手把手带您无忧上云