javascript - 如何更改 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

但是当我点击按钮时，屏幕上的水果名称并没有改变。它保持为“苹果”。有谁知道我做错了什么？我是 typescript 的新手

Answer 1

一些注意事项:

• React 函数式组件不是这样工作的。如果你的数据随时间变化，你需要定义一些状态，用一个钩子(Hook):const [fruit, setFruit] = React.useState(initialFruit) .

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

• 如您所见，React 的整个想法涉及不可变值(AKA 函数式编程)。考虑使用不可变的 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)
    }
}