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

Question

我在上下文中有一个useEffect钩子。另外，我有两个功能组件，从其中一个中，我调用上下文const context = useContext(ApiContext);但同时，来自同一组件，也需要传递useEffect的依赖项，以便useEffect代码仅在依赖项更改时才应执行，例如这里.."名称"和"范围"。下面是我的上下文代码

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;

这是代码沙盒示例：https://codesandbox.io/s/route-rerender-api-fix-q9tu2

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

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]);

工作代码沙盒 - 检查控制台

从子组件传递输入 - 代码沙箱