时间戳

首页 > 解决方案 > 在保留类类型的同时为嵌套对象反应 setState

javascript - 在保留类类型的同时为嵌套对象反应 setState

问题描述

从这个问题扩展React Set State For Nested Object

更新嵌套状态的方法是分解对象并重新构造它，如下所示：

this.setState({ someProperty: { ...this.state.someProperty, flag: false} });

但是，这对我来说是个问题，因为它不会保留组件类（下面有更多详细信息）。我的目标是使我的状态结构如下：

this.state = {
    addressComponent: {
        street: '',
        number: '',
        country: ''
    },
    weather: {
        /* some other state*/
    }
}

为了让我的生活更轻松，我创建了一个简单的地址类，它为我构建对象并具有其他一些实用功能，例如验证。

class AddressComponent {
    constructor(street, number, country) {
        this.street = street;
        this.number = number;
        this.country = country;
    }

    validate() {
        if (this.street && this.number, this.country) {
            return true;
        }
        return false;
    }
}

这允许我做的是将状态的初始化更改为：

this.state = {
    addressComponent : new AddressComponent(),
    weather: new WeatherComponent();
 }

 this will allow my view component to perform nice things like

if (this.state.addressComponent.validate()) {
    // send this state to parent container
}

这种方法的问题是，如果我想改变一个单一的信息，比如国家，并使用上面的 Stack Overflow 方法，例如：

this.setState({addressComponent: {...addressComponent, country: 'bluh'}})

这样做意味着解析 addressComponent 不再是 AddressComponent 类的一部分，因此没有 validate() 函数

为了解决这个问题，我可以每次都重新创建一个新AddressComponent课程，例如：

this.setState({addressComponent: new AddressComponent(this.state.street, this.state.number, 'bluh');

但这似乎很奇怪。

我做错了吗？有更好的方法吗？将这样的类与反应一起使用是否可以接受？

标签： javascriptreactjs

解决方案

我认为你所说的每次在你的状态下更新你的类时重新实例化你的类是确保你的validate()方法在那个时候被调用的最干净的方法。如果是我，我可能会写成：

const { addressComponent } = this.state;
this.setState({ addressComponent: new AddressComponent(addressComponent.street, addressComponent.number, 'bluh') });

推荐阅读