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

Question

我刚开始学习 React（没有后端，有上下文 API）。在 Context Provider 中，我正在寻找一种方法来从同一数据设置两个 Hook 状态。进行一次 axios 调用（无需重新渲染）。提供者接受应用程序。有什么解决办法吗？

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

Answer 1

您可以让一个 useEffect 在组件安装（也就是出现）时进行 axios 调用。

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

另外在useEffect中调用setter时不要忘记添加dependency array否则会无限循环。

您的情况可以为空。

Answer 2

因此，首先您应该快速阅读 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

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

Set two Hook states with useEffect in Context Provider

reactjs

react-context

use-effect

use-state