在此组件中,当我更改状态时,它将重新分配counter=1
我不想要的状态。我只希望它只分配counter=1
一次,然后在重新渲染期间不再分配。
而且,我不想useState
用于counter
解决此问题。
function App() {
const [value, setValue] = useState(100);
let counter = 1;
return (
<div>
<button
onClick={() => {
setValue(value - 1);
counter++;
}}
>
click me
</button>
</div>
);
}
export default App;
您可以使用useRef:
useRef返回一个可变的ref对象,该对象的.current属性已初始化为传递的参数(initialValue)。返回的对象将在组件的整个生存期内持续存在。
当内容更改时,useRef不会通知您。更改.current属性不会导致重新渲染。
function App() {
const [value, setValue] = useState(100)
const counter = useRef(1)
return (
<div>
<button
onClick={() => {
setValue(value - 1)
counter.current++
}}
>
click me
</button>
</div>
)
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句