React代码中onClick与onBlur引发无限循环的原因咨询

你的代码出现无限循环的核心问题是事件处理逻辑的写法错误：在JSX的onClick和onBlur属性中，你直接执行了setRow函数，而非传递一个仅在事件触发时才会执行的函数引用。

具体循环过程： #

• 组件首次渲染时，JSX会解析所有属性值，此时setRow((current) => current + 2)和setRow((current) => current - 2)会被立即调用，导致row状态更新。
• React检测到状态变化后，会触发组件重新渲染；重新渲染时，这两个setRow调用会再次执行，再次更新row状态，如此往复形成无限循环。

正确写法： #

将setRow包装在箭头函数中，确保它只有在对应事件触发时才执行：

const [row, setRow] = useState(1);

<textarea
  rows={row}
  value={value}
  placeholder="Votre message"
  onChange={handleInputChange}
  onClick={() => setRow((current) => current + 2)}
  onBlur={() => setRow((current) => current - 2)}
></textarea>

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