将自动更新对象存储在React状态内

Question

我有这种情况，但我不知道是否可以做这样的事情。如果将对象保存在组件的状态内，则该对象可以在不使用setState的情况下修改自身吗？

文件A.js

export default class A {
    constructor(value) {
        this.value = value;
    }

    setValue(value) {
        this.value = value;
    }
}

文件B_Component.js

import React from "react";
import A from "./A";

class B_Component extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            aObj = new A("foo")
        }
    }

    bar = () => {
        this.state.aObj.setValue("bar");
    }

    ...render etc...
}

基本上，这应该在不使用setState的情况下修改组件的状态。这是正确的还是可能有问题？

Answer 1

这是正确的还是可能有问题？

可能有问题。 :-)如果渲染该对象的value，那么您将违反React的基本规则之一，即you can't directly modify state。如果这样做，该组件将不会重新渲染。

相反，您创建一个新对象并将新对象保存为状态：

bar = () => {
    this.setState({aObj: new A("bar")});
}