Javascript 如何在上下文中传递useEffect钩子中的依赖项

我在上下文中有一个

useffect

hook。另外，我有两个功能组件，从其中一个，我调用上下文，比如

const-context=useContext（ApiContext）但同时，来自同一组件的代码也需要传递
useffect
的依赖项，这样
useffect
代码应该仅在依赖项更改时执行，例如..“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;

import React，{useState，useffect}来自“React”；
export const ApiContext=React.createContext（）；
const Context=props=>{
const[articles，setArticles]=useState（[]）；
useffect（（）=>{
console.log（'rendered'）；
setArticles（['Article One'、'Article Second'、'…ect']）；
}，[props.Name，props.Range]）；
返回

如何从我的功能组件传递
props.Name
和
props.Range
？
您可以这样做来传播父类组件中的所有道具

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

工作-检查控制台

从子组件传递输入-
您能详细说明用例吗？我想您可以初始化另一个状态并使用即将到来的道具填充它，但它闻起来像是一个糟糕的架构决策/选择……您希望在最后实现什么？@felixmosh我想让
useffect
代码仅在
[props.Name，props.Range]
更改。如何执行？@SakoBu我想让useffect代码仅在[props.Name，props.Range]更改时运行。如何执行it@Lara，我问的是最终目标，而不是如何修复您的实现，因为我认为您采用的方法不是“hooks”方式，而是
onChange={e=>setName（e.target.value）}
调用
useffect
。我需要
useffect
仅在名称值更改时执行。请您稍微解释一下您的解决方案。感谢您，例如，我将添加一个输入字段并使其正常工作给我几分钟您可以检查相同的代码沙盒，以便在控制台中键入后，将调用上下文检查它并让我知道谢谢。只是一个查询，如果我想从
First.js
调用它，而不是
index.js
？如何做？使用回调函数，用另一个代码更新沙盒让我知道你是否清楚这一点
   <Context name='test'>... your components ....</Context>

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