在 Context Provider 中使用 useEffect 设置两个 Hook 状态答案

【问题标题】：Set two Hook states with useEffect in Context Provider在 Context Provider 中使用 useEffect 设置两个 Hook 状态
【发布时间】：2021-06-28 16:23:16
【问题描述】：

我是学习 React 的新手（没有后端，使用 Context API）。在 Context Provider 中，我正在寻找一种从同一数据中设置两个 Hook 状态的方法。进行单个 axios 调用（无需重新渲染）。 Provider 接受 App。有什么解决办法吗？

export const Context = React.createContext();

const MoviesProvider = ({ children }) => {
  console.log("Context Affectations");

  const [movies, setMovies] = React.useState(null);
  const [selectedMovie, setSelectedMovie] = React.useState(null);

  useEffect(() => {
    console.log("Context useEffect 1");
    const dataGet = externalData;
    setMovies(dataGet);
  });

  useEffect(() => {
    console.log("Context useEffect 2");
    // SKIPPED PART
    const dataGet = externalData;
    setSelectedMovie(dataGet[0]);
    // SKIPPED PART
  });

在同一个useEffect中都试过了，第二个也被跳过了。

控制台：

Context Affectations
Context useEffect 1
Pass data
Context useEffect 2
Context Affectations

【问题讨论】：

dataGet 工作了吗？从表面上看，React 的行为似乎符合预期，是您的 Axios 调用不起作用。
"dataGet" 工作正常，"movies" 更新得很好。为了避免本例中的多次调用（并排除 axios 行为），我使用了一个数据文件。
谢谢，确实在使用直接的 const "externalData" 有效，所以问题出在后面。

标签： reactjs use-effect use-state context-api

【解决方案1】：

所以首先你应该快速阅读useEffect's 依赖数组以及为什么article 超级有用。您尝试解决的问题可以通过一个 useEffect 毫无问题地实现。

  useEffect(() => {
    console.log("Context useEffect 2");
    // SKIPPED PART
    const dataGet = externalData;
    setMovies(dataGet);
    setSelectedMovie(dataGet[0]);
    // SKIPPED PART
  }, []); // <- Important part this empty array means that this will run only at the mount of the component (first time appearing) but you could put inside the variable to watch so every time that changes it fetches again

【讨论】：

感谢您的回答和这篇有用的文章。
如果这可行，您介意批准它并给予支持吗？（它可能会在未来帮助其他人）
我不明白为什么人们不赞成或接受答案。
他们中的大多数人都不知道tbh...每次我需要问...
在 37 分钟前与代表同时投票，但没有增加（编辑：仅显示超过 15 个信誉的投票）。

【解决方案2】：

当组件挂载（也就是出现）时，您可以让单个 useEffect 进行 axios 调用。

useEffect 可以为你的两个 useState 调用两个 setter。

在useEffect 内部调用setter 时不要忘记添加dependency array，否则它将无限循环。

在你的情况下它可以是空的。

【讨论】：

感谢您的回答。