javascript - 如何在 Context 内的 useEffect Hook 中传递依赖项

Question

我在 Context 中有一个 useEffect 钩子(Hook)。另外，我有两个功能组件，从其中一个组件，我调用 const context = useContext(ApiContext); 之类的上下文，但同时，从同一个组件，需要传递 的依赖项code>useEffect 也使得 useEffect 代码仅在依赖项更改时才执行，例如此处的“Name”和“Range”。下面是我的上下文代码

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;

这里是 codeSandBox 示例:https://codesandbox.io/s/route-rerender-api-fix-q9tu2

如何从我的功能组件传递 props.Name 和 props.Range？

Answer 1

你可以这样做来传播父类组件的所有 Prop

<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