Question

我在Context中有一个useEffect钩子。另外，我有两个功能组件，其中之一是调用const context = useContext(ApiContext);之类的上下文，但同时，从同一个组件中，还需要传递useEffect的依赖关系，以便{{ 1}}代码仅在依赖项发生更改时才执行，例如，这里的“ .Name”和“ Range”。下面是我的上下文代码

useEffect

这是codeSandBox的范例：https://codesandbox.io/s/route-rerender-api-fix-q9tu2

如何通过功能组件传递import React, { useState, useEffect } from 'react'; export const ApiContext = React.createContext(); const Context = props => { const [articles, setArticles] = useState([]); useEffect(() => { console.log('rendered'); setArticles(['Article One', 'Article Two', '...ect']); }, [props.Name, props.Range]); return <ApiContext.Provider value={articles}>{props.children}</ApiContext.Provider>; }; export default Context;和props.Name？

Answer 1

您可以这样做，以传播来自父级类组件的所有道具

<Context {...this.props} >....your components...</Context>,

或喜欢具体

   <Context name='test'>... your components ....</Context>

您可以像在上下文中一样访问

useEffect(() => {
    console.log("rendered with props", props.name);
    setArticles(['Article One', 'Article Two', '...ect']);
  }, [props.name]);

工作codesandbox-检查控制台

从子组件传递输入-codesandbox

如何在Context内部的useEffect挂钩中传递依赖项

1 个答案: