gpt4 book ai didi

reactjs - Redux 状态正在更新,无需分派(dispatch)任何操作

转载 作者:行者123 更新时间:2023-12-03 13:43:52 27 4
gpt4 key购买 nike

我首先应该说这不是 this question, which happened to have the same title 的重复项.

我只是从 componentDidMount 方法内的 props 获取数组的 customers 对象,如下所示;

  componentDidMount() {
const { customers } = this.props
const expiringCustomers = getExpiringCustomers(customers)
console.log('Expiring customers ', expiringCustomers)
}

在另一个文件中,我有一个 getExpiringCustomers 函数,它接受传递的客户,并假设返回一个新修改的客户列表,如下所示;

function numbersOnly(value) {
if(_.isString(value)) {
value = Number(value.replace(/[^\d]/g, ''))
}

return value
}

function normalizeNumber(collection, field) {
return collection.map(obj => {
obj[field] = numbersOnly(obj[field])
return obj
})
}


export function getExpiringCustomers(customers) {
const expiringCustomers = customers.filter(customer => {
const daysLeft = Number(new Date(customer.endDate)) - _.now()
if(daysLeft <= (dateInMonth * 3)) {
return customer
}
})

return normalizeNumber(expiringCustomers, 'rent')
}

我正在将我的 React 组件与 redux 状态连接起来,如下所示;

const mapStateToProps = state => ({
customers: state.customers.filter(customer => customer && !customer.deleted)
})

export default connect(mapStateToProps)(Accounting)

问题

函数运行并记录结果后,客户的状态在 redux 存储中发生更改。

这非常令人困惑,因为 customers_edit 操作必须通过一些过程,但没有一个过程被调用/记录。

受影响对象的快照:

Ps。数据只是样板。

//- Focus on rent property

const customers = [
...,
{
id: 'o91wukyfsq36qidkld02a0voo93rna5w',
cardId: 'GD-1101010111',
id_type: 'Driving License',
firstName: 'Maalim',
lastName: 'Guruguja',
names: 'Maalim Guruguja',
property: '5iaprurefg3v3uhad688mypo9kqf6xk3',
rent: '250,000',
email: 'tonimarikapi@yahoo.com',
phone: '239-288-3838-38',
noticePeriod: '3',
status: '2 months remain',
startDate: '2018-07-09',
endDate: '2018-08-17',
createdAt: 1530623480772,
updatedAt: 1531213159147
},
...
]

//- After the functions run, log and edit customers array
const customers = [
...,
{
id: 'o91wukyfsq36qidkld02a0voo93rna5w',
cardId: 'GD-1101010111',
id_type: 'Driving License',
firstName: 'Maalim',
lastName: 'Guruguja',
names: 'Maalim Guruguja',
property: '5iaprurefg3v3uhad688mypo9kqf6xk3',
rent: 250000,
email: 'tonimarikapi@yahoo.com',
phone: '239-288-3838-38',
noticePeriod: '3',
status: '2 months remain',
startDate: '2018-07-09',
endDate: '2018-08-17',
createdAt: 1530623480772,
updatedAt: 1531213159147
},
...
]

从链接的问题(可能是重复的问题)中,回答者表示这是一些突变问题可能导致这种情况。我不确定这是否适用于只读的 props。

如何阻止这些函数更新我的 redux 存储,请帮忙。

最佳答案

您可以改变 normalizeNumber 中的对象,因为您使用的所有数组方法都不会克隆数组的对象。

更改 normalizeNumber 回调以返回具有更新字段的新对象:

function normalizeNumber(collection, field) {
return collection.map(obj => ({
...obj,
[field]: numbersOnly(obj[field])
}))
}

关于reactjs - Redux 状态正在更新,无需分派(dispatch)任何操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51261356/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com