如何更改 Typescript 类实例中的值？

Question

我有一个水果课：

export class Fruit {
    constructor(public id: number, public name: string) {}

    public changeName(_name: string): void {
        console.log('changing name')
        this.name = _name
    }
}

我像这样实现它：

import React from 'react'
import { Fruit } from '../classes/fruit'

const HomePage = () => {
    let fruit = new Fruit(1, 'apple')

    return (
        <div>
            {fruit.name} <----- I am expecting this to update on the DOM when i click the button *********
            <button onClick={() => fruit.changeName('banana')}>
                change the name
            </button>
        </div>
    )
}

export default HomePage

但是当我点击按钮时，屏幕上的水果名称没有改变。它仍然是“苹果”。有谁知道我做错了什么？我是打字稿新手

Answer 1

一些注意事项：

• React 功能组件不是这样工作的。如果您的数据随着时间的推移而变化，您需要使用钩子定义某种状态：const [fruit, setFruit] = React.useState(initialFruit)。

• 这仍然不起作用，因为你fruit是一个可变对象，React 不会“看到”就地命令性更新。并不理想，但你可以通过使用对象包装器作为状态值来愚弄 React：（{ value: someFruit }这是有效的，因为在 JS 中{ value: 1 } !== { value: 1 }。

• 考虑编写具有不可变 setter ( public changeName(name: string): Fruit) 的类，您将能够编写如下漂亮的声明性代码：<button onClick={() => setFruit(fruit.changeName('banana'))}>。

export class Fruit {
    constructor(public id: number, public name: string) {}

    public changeName(name: string): Fruit {
        return new Fruit(this.id, name)
    }
}