Как обновить компонент React при изменении глобальной переменной?

Question

У меня есть компонент React, который показывает детали футбольного матча при нажатии на эту игру в таблице, которая называется . Таблица является частью другого компонента и обновляет переменную, которая используется для отображения данных. Эта переменная является глобальной, поэтому использованиеuseState()внутри не работает. Как мне выполнить повторный рендеринг при обновлении/изменении переменной?

Вот что мойGameDataкомпонент на данный момент:

      
let gameToDisplay = {};

function displayGameData(gameId) {
    gameToDisplay = gameData.find(game => game.id === gameId);
    // This function runs when a game in the table is clicked. This part updates and works as expected. 
}

function GameData() {
    const [gdDisplay, setgdDisplay] = useState(true);

    function handleDetailClick() {
        setgdDisplay(!gdDisplay);
    }

    return (
        <div className='GameData box'>
            <h2>Game Details</h2>
            <div className='Links'>
                <ButtonGroup variant="contained" aria-label="outlined primary button group">
                    <Button onClick={handleDetailClick}>{gdDisplay ? 'Less' : 'More'} details</Button>
                </ButtonGroup>
            </div>
            {gdDisplay ? (
                <p className='data'>
// Data display that gets data from gameToDisplay 
                </p>
            ) : ( 
                <></> 
            )}
        </div>
    )
}

Да, подход с кнопками работает, но вам придется дважды нажать кнопку, чтобы данные обновились. Я пытаюсь изменить данные внутри, когдаgameToDisplayизменено. Как я могу следить за изменением этой переменной и повторной визуализацией?<p className='data'>когда это произойдет?

Answer 1

Как обновить компонент React при изменении глобальной переменной?

Вы не знаете. Не используйте глобальные переменные. Используйте состояние.

Состояние не обязательно должно быть локальным для этого конкретного компонента. Если этот компонент необходимо повторно отобразить на основе изменения состояния другого компонента, у вас есть множество вариантов:

• Поднимите состояние так, чтобы оно управлялось общим родительским компонентом и передавалось дочерним компонентам в качестве реквизита.
• Использовать _ крючок для управления состоянием вне компонентов.
• Используйте специальный хук , который управляет состоянием вне компонента(ов) и обеспечивает доступ к чтению и настройке этого состояния внутри любого компонента, который в этом нуждается.
• Используйте «глобальную» систему управления состоянием , которая управляет состоянием вне компонентов и позволяет компонентам подписываться на это состояние.

По сути, в целом вы думаете об этом неправильно. Вы пытаетесь использовать React без использования React , вручную управляя «состоянием» в глобальных переменных и перерисовывая компоненты вручную с помощью собственной логики.

Не.

React управляет обновлениями состояния и повторной отрисовкой компонентов. Это его основная функциональность. Так что, если ваша цель — использовать React, тогда используйте React.