为什么我收到此错误：React Hook useEffect 内部的变量在每次渲染后都会丢失？

Question

i am getting this error warning Assignments to the 'height' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect react-hooks/exhaustive-deps

this is my code

what happen?

const MyComponent = ({
  height,})=>{

 useEffect(() => {
    const getData = async () => {
      try {
        if (height < 10) {
          height = 10
        }
     const newValue = calculateValue(height, width)
    }
    if(isNotValidate){
       getData()
    }
}

by the error i am using useEffect but the error following apparing

Answer 1

In React, state and props are to be considered and treated as immutable. When you set height = 10 this mutates the props object. The error is saying that each render that the height prop is reset to the passed value.

I just want to set new value if the current value is less to 10, and then calculateValue

You can use the maximum of height or the value 10.

const newValue = calculateValue(Math.max(height, 10), width)