javascript - 重新渲染次数过多

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");
  }

状态应该根据weather.temp设置

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");
    }
  }, []);