从 child 设置上下文会导致无限调用循环

Question

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

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

PlayerPage child 组件将 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 只设置一次上下文的值？

Answer 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>;
}

从 child 设置上下文会导致无限调用循环

Setting context from child causes infinite call loop

javascript

reactjs

react-router-dom

use-context