正在更新 Redux 状态而不分派任何操作

IT技术 反应 还原 反应还原
2021-05-02 12:15:29

我应该首先说这不是这个问题的重复,它碰巧有相同的标题

我只是customers从这样propscomponentDidMount方法中获取数组对象

  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动作必须通过一些过程,但它们都没有被调用/记录。

受影响对象的快照:

附言。 数据只是样板文件。

//- 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 商店,请帮忙。

2个回答

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

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

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

看起来您customers无意中修改了数组。

尝试:

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