React 中的条件设置状态

Question

我有这个组件可以根据学校的评级改变背景颜色。between 1to 10, if the school's rating 3and below should be orange, between 4and 7and should be yellow, 8and above应该是green。如果学校没有评分（null），应该是gray。这是我的尝试：...  const [bg, setBg] = useState('gray')  const Single = ({rating, name, distance}: Single) => {    if (rating && rating <= 3) {      setBg(`orange`)    } else if (rating && rating >= 4 && rating <= 7) {      setBg(`yellow`)    } else if (rating && rating >= 8) {      setBg(`green`)    }    return (      <div>        <span backgroundColor={bg}>          {rating !== null ? rating : `NA`}        </span>      </div>    )  }...但是现在一切都是green，即使我用各种数字进行了测试。我究竟做错了什么？

Answer 1

你需要useMemo在这里

const bg = useMemo(() => {

    if (rating && rating <= 3) {

        return 'orange'

      } else if (rating && rating >= 4 && rating <= 7) {

        return 'yellow'

      } else if (rating && rating >= 8) {

        return 'green'

      }

}, [rating])

所以现在useMemo只有当值rating被更改并将返回值保存到时才会调用函数回调const bg

如果您希望跨度的背景颜色基于 的值设置bg，则必须更改跨度定义，如下所示

<span style={{backgroundColor: bg}}>...

Answer 2

请参阅Hooks 规则和其中的代码示例。useState必须在组件的主体内调用，如下所示：

const Single = ({rating, name, distance}: Single) => {

    const [bg, setBg] = useState('gray')

    if (rating && rating <= 3) {

      setBg(`orange`)

    } else if (rating && rating >= 4 && rating <= 7) {

      setBg(`yellow`)

    } else if (rating && rating >= 8) {

      setBg(`green`)

    }

    return (

      <div>

        <span backgroundColor={bg}>

          {rating !== null ? rating : `NA`}

        </span>

      </div>

    )

  }