如何在不需要时阻止要调用的功能组件？依赖在哪里？

Question

我有两个组件，一个是获取数据（“模型”），另一个是显示它（“视图”）。获取之后，视图组件应该允许对内容进行一些更改，但不应触发任何获取。不幸的是它确实如此：/我不知道如何。这是“模型”中的代码。你能告诉我什么可以触发这个组件被刷新吗？

你好，Geo

                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([]);...}

当多个组件使用相同的context(LangContext)hook时，即使它们监控或更新的状态不是同一个组件，随着“上下文状态”的更新，所有这些都会受到影响，因此会被强制刷新。说明这个事实对我来说是最重要的方面，表明 Context 不能用作应用程序的通用数据存储库。

解决方案是将状态拆分 到多个上下文挂钩中，将状态作为属性提供，声明哪些组件将被告知哪些更新。可以有useEffect、useMemo等其他解决方案，但我还没有。

非常感谢观众和贡献者。地理位置

如何在不需要时阻止要调用的功能组件？依赖在哪里？

How can I block the functional componend to be called when it is not needed ? Where is the dependency?

reactjs

react-context

react-hooks