在React Redux中,要更改数组中的对象值,可以通过以下步骤实现:
const initialState = {
data: [
{ id: 1, name: 'Object 1', value: 'Value 1' },
{ id: 2, name: 'Object 2', value: 'Value 2' },
{ id: 3, name: 'Object 3', value: 'Value 3' }
]
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_OBJECT_VALUE':
return {
...state,
data: state.data.map(obj => {
if (obj.id === action.payload.id) {
return {
...obj,
value: action.payload.newValue
};
}
return obj;
})
};
default:
return state;
}
};
在上面的例子中,我们定义了一个名为UPDATE_OBJECT_VALUE
的action类型,它接收一个payload
对象,其中包含了需要更新的对象的id
和新的值newValue
。在reducer中,我们使用map
方法遍历数组,当找到需要更新的对象时,返回一个新的对象,其中只更新了value
属性,其他属性保持不变。
type
和payload
的action对象。const updateObjectValue = (id, newValue) => {
return {
type: 'UPDATE_OBJECT_VALUE',
payload: {
id,
newValue
}
};
};
在上面的例子中,updateObjectValue
接收id
和newValue
作为参数,并返回一个包含type
和payload
的action对象。
connect
函数将reducer和action creator连接到组件中,并通过props将它们传递给组件。import React from 'react';
import { connect } from 'react-redux';
import { updateObjectValue } from './actions';
const MyComponent = ({ data, updateObjectValue }) => {
const handleUpdate = (id, newValue) => {
updateObjectValue(id, newValue);
};
return (
<div>
{data.map(obj => (
<div key={obj.id}>
<span>{obj.name}: </span>
<input
type="text"
value={obj.value}
onChange={e => handleUpdate(obj.id, e.target.value)}
/>
</div>
))}
</div>
);
};
const mapStateToProps = state => {
return {
data: state.data
};
};
export default connect(mapStateToProps, { updateObjectValue })(MyComponent);
在上面的例子中,我们使用connect
函数将data
状态和updateObjectValue
action creator连接到MyComponent
组件中。通过mapStateToProps
函数,我们将data
状态映射到组件的props中。在组件中,我们可以通过调用updateObjectValue
action creator来触发状态的更新。
这样,当输入框的值发生变化时,handleUpdate
函数会调用updateObjectValue
action creator,并传递当前对象的id
和新的值作为参数,从而触发状态的更新。
这是一个基于React Redux的方法来在reducer状态下更改数组中的对象值。关于React Redux、reducer、action creator等概念的详细信息,可以参考腾讯云的React Redux文档。
领取专属 10元无门槛券
手把手带您无忧上云