如何阻止不需要的功能组件被调用?依赖关系在哪里?

Question

我有两个组件，一个是获取数据("模型")，另一个是显示数据("视图")。在获取之后，视图组件应该允许对内容进行一些更改，但不应该触发任何获取。不幸的是:/我不知道怎么做。这是来自"模型"的代码。你能告诉我什么可以触发这个组件刷新吗?

问候,地理

function ForeignListContFct(props) {
let libraryName = props.props.language;
const { word, setLang1Library } = useContext(DataContext);
var URL = 'https://localhost:44307/api/langs/' + word;
console.log('Fetching :' + URL);
const { loading, error, data } = CustomFetch(URL, word, null, false);
if (loading) {
return <div>Loading ...</div>;
}
if (word === '') {
return <div>Word not searched yet ! ..</div>;
}
if (error) {
return (
<div>
<h3>Error: {error.message}</h3>
<h3>{error.stack}</h3>
</div>
);
}
if (data !== null && data.length > 0) {
setLang1Library(data);
}
return <ForeignList props={{ language: libraryName }}></ForeignList>;
}

Answer 1

好吧，我需要回答这个问题，因为我现在知道的更多了。

在react中，可以为上下文分配多个变量:

function LangContextProvider(props) {
const [thes, setThes] = useState([]);
const [lang1Pockets, setLang1Pockets] = useState([]);
const [lang1Library, setLang1Library] = useState([]);...}

当多个组件使用相同的上下文(LangContext))钩子，即使它不是它们监视或更新的状态组件，也要作为"上下文的状态"。更新后，所有这些都会受到影响，因此会强制刷新。说明这一事实对我来说是最重要的方面，表明上下文不能用作应用程序的公共数据存储库。

解决方案是拆分状态到多个上下文钩子中，以属性的形式提供状态，声明哪些组件将被通知哪些更新。还有其他解决方案，如useEffect, useMemo等，但我还没有做到。

感谢观众和贡献者。Geo