Question

状态属性是ReactNode，我想更改该属性，然后在某些onClick函数中获取属性值。

但是我发现状态属性值没有改变。

像这样反应代码：

     import React, { useState, useEffect } from 'react';
     import { Button } from 'antd';

     interface SomeData {
        id?: number;
        content?: React.ReactNode;
     }

     const Test = (): React.ReactElement => {
        const [someData, setSomeData] = useState<SomeData>({});

        const handleClick = (): void => {
            console.log('click event', someData);
        };

        const loadData = (): void => {
            const content = <Button onClick={handleClick}>button#1</Button>;
            setSomeData({ id: 10, content, });
        };

        useEffect(() => { loadData() }, []);


        return (
            <div>
                {someData.content}
                <Button onClick={handleClick}>button#2</Button>
            </div>
        );
     };

当我单击button#1时，功能handleClick的控制台结果为click event {}，

并单击button#2，控制台结果为click event {id: 10, content: {…}}。

为什么这两个相同的点击事件会产生不同的结果？

Answer 1

让我们看看发生了什么

第一次渲染Test时，someData是一个空对象，因此{someData.content}不渲染任何内容。
您的useEffect在第一个渲染之后被调用（因为它具有一个空的依赖关系数组）。在其中，它将someData.content函数链接到的按钮保存在handleClick中。
注意：：此handleClick有其自己的闭包，其中someData仍然是一个空对象，因为尚未完成对someData的更新。
单击button#1时，您将调用handleClick及其结束符，其中someData仍然是空对象。
相反，当点击button#2时，由于每次渲染button#2，因此每次完成渲染时，其handleClick的闭合都会改变，因此someData位于{ {1}}已更新。

如何解决此问题？这取决于您实际想要做什么，因为我听不懂。您是否希望在单击handleClick时将button#1设置为someData.id，然后执行某些操作？让我知道，我会尽力为您提供更多帮助。

Answer 2

如果要在单击按钮时“激活”函数“ handleClick”，则应声明函数在函数“类”中。

示例：

import React, { Component, MouseEvent } from 'react';

export class Button extends Component {
  handleClick(event: MouseEvent) {
    event.preventDefault();
    alert(event.currentTarget.tagName); // alerts BUTTON
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>
  }
}

来源：https://fettblog.eu/typescript-react/events/

useState设置方法和状态不会在onClick函数中更改

2 个答案: