在 React 中，当在 url 中手动更改路由参数时，全局状态会不同步

Question

我们的 React 应用程序中有一个变量：

1. 在App.js 中定义为全局状态，通过GlobalContext.Provider 使用其setter 方法全局传递给其他组件，并且
2. 单独用作许多应用路由的路由参数。

下面是我们App.js文件相关部分的短代码sn-p then：

import React, { useState, useEffect } from 'react';
import GlobalContext from './context/GlobalContext';
import OtherComponents...

function App() {
    const [competition, setCompetition] = useState({ value: 15, label: 'Season 1' });

    return (
        <GlobalContext.Provider value={{ // Pass Global State Through To Entire App
            competition, setCompetition
        }}>
            <Navbar />
            <Switch>
                <Route exact path='/' render={(props) => <HomePage {...props} />} />
                <Route exact path='/stats' component={StatsPage} />
                <Route exact path='/about' component={AboutUs} />
                <Route exact path='/persons/:competitionId/ component={PersonsComponent} />
                <Route exact path='/teams/:competitionId component={TeamsComponent} />
            </Switch>
        </GlobalContext.Provider>
    );
}

export default App;

competition 全局状态具有键 value 和 label，因此 url 参数中的 competitionId 与 competition.value 值相同。

competition 的全局状态值旨在使用select 小部件在<Navbar> 组件中进行更改。当这个小部件被切换时，全局状态被更新，useHistory 钩子用于将应用推送到新路由，使用更新后的competition.value 设置competitionId url 参数。

competition 的值在我们应用程序的许多组件中需要，包括那些没有 url 参数的组件（例如在 <HomePage> 组件中）。出于这个原因，我们觉得它需要作为一个全局变量，传递给所有其他组件。这对我们来说也非常方便，因为使用 useContext 挂钩可以在任何地方轻松访问该变量。

但是，我们的 url 参数中似乎也需要该值。这些组件根据传递的competitionId 获取不同的数据，它们在 url 参数中是应用程序路由的很大一部分。

我们的问题然后是用户可以手动更改网站的 url，这可以更改 url 参数同时也不会更改变量的全局状态。通过手动更改 url，而不是使用 select 小部件，全局状态和 url 参数就会不同步...

编辑：这是我们用来切换competition 值的select 组件（抱歉，帖子太长了）。这个选择在我们的导航栏中，并且在我们的<Switch>之外是全局可访问的：

function CompetitionSelect({ currentPath }) {
    // Grab History In Order To Push To Selected Pages
    let history = useHistory();
    let { competition, setCompetition } = useContext(GlobalContext);

    // Fetch Data on All Competitions (dropdown options)
    const competitionInfosConfig = {};
    const [competitionInfos, isLoading1, isError1] = useInternalApi('competitionInfo', [], competitionInfosConfig);

    // Messy digging of competitionId out of current path.
    let competitionIds = competitionInfos.map(row => row.competitionId);
    let pathCompetitionId = null;
    competitionIds.forEach(id => {
        if (currentPath.includes(`/${id}/`)) {
            pathCompetitionId = id;
        }
    });

    // Messy Handling State/Params Out Of Sync
    if (pathCompetitionId === null) {
        console.log('Not a page where testing is needed');
    }
    else if (competition.value !== pathCompetitionId) {
        console.log('WERE OUT OF SYNC...');
        let correctGlobalState = { value: pathCompetitionId, label: 'Label Set' };
        setCompetition(correctGlobalState);
    } else {
        console.log('IN SYNC: ', competition.value, ' == ', pathCompetitionId);
    }

    // Handle updating state + pushing to new route
    const handleSelect = (event) => {
        let oldPath = JSON.parse(JSON.stringify(history.location.pathname));
        let newPath = '';
        competitionIds.forEach(id => {
            if (oldPath.includes(`/${id}/`)) {
                newPath = oldPath.replace(`/${id}/`, `/${event.value}/`)
            }
        });

        if (newPath !== '') {
            setCompetition(event);
            history.push(newPath);
        }
    };

    // Create The Select
    const competitionSelect =
        (<Select
            styles={appSelectStyles}
            value={competition}
            options={competitionInfos}
            onChange={handleSelect}
            placeholder={'Select Competition'}
        />);

    return (
        {competitionSelect}
    );
}

export default CompetitionSelect;

这个组件在技术上确实解决了if, if else, else 子句中的不同步问题，但是每当调用setCompetition(correctGlobalState) 时，React 都会抛出以下警告消息：

Warning: Cannot update a component (App) while rendering a different component (CompetitionSelect). To locate the bad setState() call inside CompetitionSelect, follow the stack trace as described...

Answer 1

我认为解决这个问题的好方法是

• 尝试从 URL 中获取比赛数据
• 如果可用，则将其用作状态的初始值，否则将其用作默认值
• 使用 useEffect 在位置更改时使用来自 URL 的比赛数据更新状态（如果可用）

例如

function App() {
  const location = useLocation();
  const params = useParams();

  // implement getCompetitionFromParams as appropriate
  // returns undefined if no competition data in URL params
  const competitionFromParams = getCompetitionFromParams(location, params)

  const [competition, setCompetition] = 
    // init state on first load, 
    // with default if competitionFromParams not available
    useState(competitionFromParams || { value: 15, label: 'Season 1' });


  // update state on location change,
  // if competitionFromParams available
  useEffect(() => {
    if (competitionFromParams !== undefined) {
      setCompetition(competitionFromParams); 
    }
  }, [location]); // runs useEffect only on location change

  ...

这样，您就可以得到您想要的 - competition 处于全局状态，可以通过选择手动设置它，而且当它出现在相关 URL 参数中时，它也可以自动同步。