Question

有人可以解释我做错了什么吗？我有一个反应功能组件，我使用 useEffect 钩子从服务器获取一些数据并将该数据放入状态值。获取数据后，在同一个 useHook 中，我需要使用该状态值，但由于某种原因，该值很清楚。看看我的例子，控制台有一个空字符串，但在浏览器上我可以看到那个值。

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;

Link to codesandbox。

Answer 1

useEffect 钩子将在您的组件呈现后运行，并且只要第二个参数数组中传递的依赖项之一发生更改，它就会重新运行。

在您的效果中，您正在执行 console.log(value) 但在依赖项数组中您没有将 value 作为依赖项传递。因此，该效果仅在挂载时运行（当 value 仍为 "" 时）并且不会再次运行。

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

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;

不确定您需要做什么，但是如果您需要对端点的返回值执行某些操作，您应该使用端点返回值（而不是状态中的值）或处理状态值钩外

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;

react useEffect 如何与 useState 挂钩？

1 个答案: