时间戳

首页 > 解决方案 > if else 条件语句在反应

javascript - if else 条件语句在反应

问题描述

我有一个带有单个值、2 个按钮和 3 个 div 的简单应用程序。value 变量从 0 开始，按钮增加或减少值，我有 3 个 div；小号中号大号。我需要根据值渲染一个 div。如果值为20，则为大div，小于等于10，为中div，如果小于10，为小div。

我的目标是根据用户的输入呈现视图。

这是我的代码

import React, { useState, useEffect } from 'react';

const ShowHide = () => {
  const [value, setValue] = useState(0);
  const [lrg, setLrg] = useState(false);
  const [mid, setMid] = useState(false);
  const [sml, setSml] = useState(true);
 
  
  if (value >= 20 ) {
    setLrg(true) 
    setMid(false) 
    setSml(false)
  }

  if ( value >= 10  && value <= 20) {
    setLrg(false) 
    setMid(true) 
    setSml(false)
  }

  if (value < 10 ) {
    setLrg(false) 
    setMid(false) 
    setSml(true)
  }

  return <>

  <h3>show/hide div</h3>
  <div>
    <h3> value is  :{value}</h3>
    <button className='btn' onClick={() => {setValue(value + 5)}}> add </button>
    <br></br>
    <button className='btn' onClick={() => {setValue(value - 5)}}> minus </button>
  </div>
  <br></br>
  <div className="form"> 
    {lrg && <Lrg />}
    {mid && <Mid />}
    {sml && <Sml />}
  </div>
  </>;
};

 

const Lrg = () => {
  return (
      <div>
    <h3> value is larger than 20</h3>
  </div>
  );
}

const Mid = () => {
  return (
      <div>
    <h3> value is btwn 10 and 20</h3>
  </div>
  );
}

const Sml = () => {
  return (
      <div>
    <h3> value is less than 10</h3>
  </div>
  );
}
export default ShowHide;

为了使它工作，我定义了 3 个其他变量，sml、med、lrg。对于 lrg 和 med 从 false 开始，因为值从 0 开始，对于 sml 因为 value 为 0，所以从 true 开始。当值发生变化时，我想相应地更新这些 var。但是我收到此错误

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

它是在我添加 if else 语句之后出现的，我如何在没有该错误的情况下创建一些条件

标签： javascriptreactjsreact-hooks

解决方案

摆脱除 .useState之外的所有 s [value, setValue]。然后在你的 JSX 中：

    {value >= 20 && <Lrg />}
    {value < 20 && value >= 10 && <Mid />}
    {value < 10 && <Sml />}

推荐阅读