Метод useState и состояние не изменяются в функции onClick

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

Давайте посмотрим, что происходит:

1. Когда Test отображается впервые, someData - пустой объект, поэтому {someData.content} ничего не отображает.
2. Ваш useEffect вызывается после первого рендера (потому что он имеет пустой массив зависимостей). Там он сохраняет в someData.content кнопку, с которой связана функция handleClick.
   ПРИМЕЧАНИЕ: Этот handleClick имеет свое собственное замыкание, где someData все еще пустое объект, поскольку обновление на someData еще не выполнено.
3. Когда вы нажимаете button#1, вы вызываете handleClick с его закрытием, в котором someData все еще пусто object.
4. Вместо этого, при нажатии на button#2, поскольку button#2 отображается каждый раз, его закрытие handleClick изменяется каждый раз, когда выполняется рендеринг, поэтому someData внутри этих handleClick обновлено.

---

Как вы могли это исправить? Это зависит от того, что вы на самом деле хотите сделать, потому что я не могу понять. Вы хотите, чтобы, нажимая button#1, вы устанавливали someData.id на 1, а затем что-то выполняли? Дайте мне знать, и я постараюсь помочь вам больше.

Answer 2

Если вы хотите «активировать» вашу функцию «handleClick» при нажатии на кнопку, вы должны объявить, что ваша функция находится в вашей функции «class».

Пример:

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/