渲染后 useEffect 不运行

Question

我对 useEffect 是如何触发的以及它是如何工作的感到有点困惑。我写了一个这样的函数，但是 useEffect 根本没有运行。我想从 API 中获取数据，然后根据数据呈现页面。但它不会触发 useEffect。如果我不使用useEffect，它会渲染页面3次。

async function getData() {
  var tmpArrData = [];
  await fetch("this API is hidden due to the privacy of the company - sorry")
    .then((res) => res.json())
    .then((data) => {
      console.log("data", data);
      tmpArrData = data;
  });
  console.log("tmpData ", tmpArrData);
  return tmpArrData;
}

function App() {

  const [arrData, setArrData] = useState();
  const [loadData, setLoadData] = useState(false);

  useEffect(() => {
    console.log("if it works, this line should be shown");
    const tmpArrData = getData();
    setArrData(tmpArrData);
  }, [arrData]);


  const data = arrData[0];
  console.log(data);

  return (
      <GifCompoment 
      id = {data.id}
      name = {data.name}
      activeTimeTo = {data.activeTimeTo}
      activeTimeFrom = {data.activeTimeFrom}
      requiredPoints = {data.requiredPoints}
      imageUrl = {data.imageUrl}
      />
  );
}

export default App;

Answer 1

useEffect 挂钩保证在初始渲染结束时至少运行一次。

getData 是一个 async 函数，useEffect 回调代码不等待它解决。简单的解决方案是从 getData 隐式返回的 Promise 链接并访问解析的值以更新 arrData 状态。确保从 useEffect 的依赖数组中移除状态，这样就不会创建渲染循环。

getData 实现可以通过返回 fetch 结果来清理/收紧，无需先保存到临时变量中。

async function getData() {
  return await fetch(".....")
    .then((res) => res.json());
}

useEffect(() => {
  console.log("if it works, this line should be shown");
  getData().then((data) => {
    setArrData(data);
  });
}, []); // <-- empty dependency so effect called once on mount

另外，由于arrData 最初是未定义的，arrData[0] 可能会抛出错误。您可能希望提供有效的初始状态，并在第一个元素未定义的情况下提供后备值，因此您不要尝试访问未定义对象的属性。

const [arrData, setArrData] = useState([]);

...

const data = arrData[0] || {}; // data is at least an object

return (
  <GifCompoment 
    id={data.id}
    name={data.name}
    activeTimeTo={data.activeTimeTo}
    activeTimeFrom={data.activeTimeFrom}
    requiredPoints={data.requiredPoints}
    imageUrl={data.imageUrl}
  />
);

Answer 2

你应该调用Promise的状态设置器

function App() {
    const [arrData, setArrData] = useState();

    function getData() {
        fetch("/api/hidden")
            .then((res) => res.json())
            .then((data) => setArrData(data));
    }

    useEffect(() => {
        console.log("if it works, this line should be shown");
        getData();
    }, []);

    return ...
}

Answer 3

通过结合 Drew Reese 和 Artyom Vancyan 的答案，我已经解决了我的问题。我觉得关键点在then函数.then((data) => setArrData(data))中的setState，不要把依赖放在useEffect中，在useEffect里面等待。非常感谢超级超人。大爱

useEffect(() => {
    console.log("if it works, this line should be shown");
    const getData = async () => {
      await fetch("hidden API")
      .then((ref) => ref.json())
      .then((data) => {
        setArrData(data);
      });
    }
    getData();
  }, []);

Answer 4

function App() {

  const [arrData, setArrData] = useState([]);
  const [loadData, setLoadData] = useState(false);

  
  const async getData=()=> {
  var tmpArrData = [];
  await fetch("this API is hidden due to the privacy of the company - sorry")
    .then((res) => res.json())
    .then((data) => {
      console.log("data", data);
      setArrData(tmpArrData);
  });
  console.log("tmpData ", tmpArrData);
  return tmpArrData;
}

  useEffect(() => {
    console.log("if it works, this line should be shown");
    const callApi =async()=>{
      await getData();
    } 
  }, [arrData]);


  const data = arrData[0];
  console.log(data);

  return (
      <GifCompoment 
      id = {data.id}
      name = {data.name}
      activeTimeTo = {data.activeTimeTo}
      activeTimeFrom = {data.activeTimeFrom}
      requiredPoints = {data.requiredPoints}
      imageUrl = {data.imageUrl}
      />
  );
}

export default App;

页面将呈现正常的三到四倍。