我想停止在 react-hooks 中渲染答案

【问题标题】：I want stop rendering in react-hooks我想停止在 react-hooks 中渲染
【发布时间】：2021-04-06 15:05:07
【问题描述】：

它继续被渲染。我想阻止它。

由于这个问题，从 Api 收到的照片和文字一直在随机变化。

我认为 useEffect 是问题所在。请告诉我，因为我是初学者。

这是 useFetch.jsx

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  async function fetchUrl() {
    const response = await fetch(url);
    const json = await response.json();
    setData(json);
    setLoading(false);
  }
  useEffect(() => {
    fetchUrl();
  });
  return [data, loading];
}
export default useFetch;

这是 Main.jsx

import React from "react";
import styled from "styled-components";
import useFetch from "./useFetch";
import "./font.css";

const url = "https://www.thecocktaildb.com/api/json/v1/1/random.php";
const Main = () => {
  const [data, loading] = useFetch(url);
  return (
    <Wrapper>
      <Header>My Cocktail Recipe</Header>
      {loading ? (
        "Loading..."
      ) : (
        <>
          {data.drinks.map(
            ({ idDrink, strDrink, strAlcoholic, strGlass, strDrinkThumb }) => (
              <Container>
                <img src={`${strDrinkThumb}`} alt="" />
                <div key={`${idDrink}`}>{`${strDrink}`}</div>
              </Container>
            )
          )}
        </>
      )}
      <Search type="text" placeholder="검색하세요" val />
    </Wrapper>
  );
};
export default Main;

【问题讨论】：

如果你只希望你的效果运行一次，添加一个依赖数组：useEffect(() => {...}, []) 作为 useEffect 的第二个参数
这能回答你的问题吗？ Can I set state inside a useEffect hook

标签： reactjs react-hooks rendering use-effect

【解决方案1】：

您必须更新 useFetch.jsx：

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  async function fetchUrl() {
    const response = await fetch(url);
    const json = await response.json();
    setData(json);
    setLoading(false);
  }

  useEffect(() => {
    fetchUrl();
  }, []); //<--- Here

  return [data, loading];
}
export default useFetch;

问题是 useEffect 钩子接收两个参数，而您忘记了第二个参数，即效果的依赖项数组。

【讨论】：

【解决方案2】：

useEffect(() => {
    fetchUrl();
  }, []);
  return [data, loading];
}

添加数组感谢 Nick Parsons

【讨论】：