重新渲染过多

Question

我遇到很多重新提交错误

我尝试使用useEffect仅在更换服装时进行渲染

function DashboardHeaderContent({ looks, weather }) {
  const [seasonRange, setSeasonRange] = React.useState();

  function renderLook(look) {
    return <Look id={look._id} img={look.img} title={look.title} />;
  }

  if (weather.temp >= 7 && weather.temp <= 16) {
    setSeasonRange("Spring");
  } else if (weather.temp >= 16 && weather.temp <= 50) {
    setSeasonRange("Sommer");
  } else if (weather.temp >= 6 && weather.temp <= 18) {
    setSeasonRange("Fall");
  } else if (weather.temp <= 7) {
    setSeasonRange("Winter");
  }

状态应取决于天气。温度

Answer 1

您可以将useEffect（）与空数组一起用作第二个参数，以防止其观察任何状态。因此，它基本上只会运行一次。

function DashboardHeaderContent({ looks, weather }) {
  const [seasonRange, setSeasonRange] = React.useState();

  function renderLook(look) {
    return <Look id={look._id} img={look.img} title={look.title} />;
  }
  
  useEffect(() => {
    if (weather.temp >= 7 && weather.temp <= 16) {
      setSeasonRange("Spring");
    } else if (weather.temp >= 16 && weather.temp <= 50) {
      setSeasonRange("Sommer");
    } else if (weather.temp >= 6 && weather.temp <= 18) {
      setSeasonRange("Fall");
    } else if (weather.temp <= 7) {
      setSeasonRange("Winter");
    }
  }, []);