React函数组件内调用自定义状态更新函数报错，求原因解析

报错原因 #

你在组件的顶层渲染逻辑中直接调用了increase()函数，而该函数内部调用了setValue(10)——这会触发React的状态更新。状态更新会导致组件重新渲染，组件重新渲染时又会再次执行increase()，再次触发状态更新，如此反复形成无限渲染循环，违反了React的渲染机制，因此抛出错误。

解决办法 #

方式1：通过用户交互触发（比如按钮点击）

将状态更新逻辑绑定到用户交互事件上，确保只有用户操作时才执行状态更新：

import React, { useState } from 'react'

function ComponentOne() {
    const [value, setValue] = useState(0);
    const increase = () => {
        setValue(10)
    }
    
  return (
    <div>
        <h3>{value}</h3>
        <button onClick={increase}>设置值为10</button>
    </div>
  )
}

export default ComponentOne

方式2：使用useEffect执行一次性初始化

如果需要在组件挂载时就将值设置为10，可以借助useEffect，通过空依赖数组确保逻辑只执行一次：

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

function ComponentOne() {
    const [value, setValue] = useState(0);
    
    useEffect(() => {
        setValue(10);
    }, [])

  return (
    <div>
        <h3>{value}</h3>
    </div>
  )
}

export default ComponentOne

内容的提问来源于stack exchange，提问作者shaijuelayidath