从孩子设置上下文会导致无限调用循环答案

【问题标题】：Setting context from child causes infinite call loop从孩子设置上下文会导致无限调用循环
【发布时间】：2021-01-03 12:05:58
【问题描述】：

我有一个使用 react-router-dom 的应用程序。

// App.js
function App() {
    return (
        <SiteContextProvider>
            <Switch>
                <Route path="/player/:slug"><PlayerPage /></Route>
                <Route default><NotFoundPage /></Route>
            </Switch>
        </SiteContextProvider>
        );
}

PlayerPage 子组件将 SiteContext 设置为 URL 中传递的参数 slug 的值。

// SiteContextProvider.js
export const SiteContext = React.createContext(null);

export function SiteContextProvider(props) {
    const [value, setValue] = useState(null);

    return <SiteContext.Provider value={{value, setValue}}>{props.children}</SiteContext.Provider>;
}

export function PlayerPage(props) {
    const { slug } = useParams();
    const { value, setValue } = useContext(SiteContext);
    setValue(slug);

    return <span>{value}</span>;
}

问题是当PlayerPage加载时，它调用setValue，它设置上下文的值，重新加载PlayerPage。这会导致无限循环并且我的代码崩溃。如何让 PlayerPage 只设置一次上下文的值？

【问题讨论】：

标签： javascript reactjs react-router-dom use-context

【解决方案1】：

你的问题在这里：

export function PlayerPage(props) {
    const { slug } = useParams();
    const { value, setValue } = useContext(SiteContext);
    // Don't call setValue directly inside the function
    setValue(slug);

    return <span>{value}</span>;
}

这使得上下文状态改变 -> 重新渲染这个组件，这将再次改变状态 -> 重新渲染这个组件等等。

您应该在效果内调用它：

export function PlayerPage(props) {
    const { slug } = useParams();
    const { value, setValue } = useContext(SiteContext);

    React.useEffect(() => {
        setValue(slug);
    }, [slug, setValue]);

    return <span>{value}</span>;
}

【讨论】：