react useEffect如何与useState挂钩一起工作？

Question

有人能解释一下我做错了什么吗？我有一个react功能组件，在其中我使用useEffect钩子从服务器获取一些数据，并将这些数据放入状态值。在获取数据之后，在同一个useHook中，我需要使用该状态值，但由于某些原因，该值是明确的。看看我的示例，console有一个空字符串，但在浏览器上我可以看到该值。

import "./styles.css";
import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  function fetchHello() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("Hello World");
      }, 1000);
    });
  }

  const handleSetValue = async () => {
    const hello = await fetchHello();
    setValue(hello);
  };

  useEffect(() => {
    const fetchData = async () => {
      await handleSetValue();
      console.log(value);
    };

    fetchData();
  }, [value]);

  return (
    <div className="App">
      <h1>{value}</h1>
    </div>
  );
};

export default App;

链接到codesandbox。

Answer 1

useffect钩子将在组件呈现后运行，并且每当在第二个参数的数组中传递的依赖项之一发生更改时，它将重新运行。

实际上，您正在执行控制台。日志（值）但在依赖项数组中，您没有将值作为依赖项传递。因此，该效果仅在装载时运行（当值仍然为”）并且不再运行。

通过将value添加到依赖项数组中，该效果将在装载时运行，但也会在value更改时运行（在正常情况下，您通常不想这样做，但这取决于）

import "./styles.css";
import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  function fetchHello() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("Hello World");
      }, 1000);
    });
  }

  const handleSetValue = async () => {
    const hello = await fetchHello();
    setValue(hello);
  };

  useEffect(() => {
    const fetchData = async () => {
      await handleSetValue();
      console.log(value);
    };

    fetchData();
  }, [value]);

  return (
    <div className="App">
      <h1>{value}</h1>
    </div>
  );
};

export default App;

不确定您需要做什么，但是如果您需要使用endpoint返回的值做一些事情，您应该使用endpoint返回的值（而不是状态中的值）或者在钩子之外处理状态值

import "./styles.css";
import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  function fetchHello() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("Hello World");
      }, 1000);
    });
  }

  const handleSetValue = async () => {
    const hello = await fetchHello();

    // handle the returned value here 

    setValue(hello);
  };

  useEffect(() => {
    const fetchData = async () => {
      await handleSetValue();

    };

    fetchData();
  }, []);

  // Or handle the value stored in the state once is set
  if(value) {
    // do something
  }

  return (
    <div className="App">
      <h1>{value}</h1>
    </div>
  );
};

export default App;