---
url: /docs/guide/usage/linter/rules/react/set-state-in-render.md
---

### 功能

禁止在渲染期间无条件设置状态（包括在
`useMemo` 回调中），因为这会触发额外的渲染，并可能
导致无限渲染循环。

由 React Compiler 提供支持，该编译器每个文件运行一次，并与其他 React Compiler 规则共享。移植自
[`react-hooks/set-state-in-render`](https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-render)。

### 为什么这是不好的？

每次渲染时调用 `setState` 都会安排另一次渲染；无条件调用会无限循环，有条件调用仍会导致两次渲染。

### 示例

此规则的**错误**代码示例：

```jsx
import { useState } from "react";
function Component() {
  const [state, setState] = useState(0);
  setState(state + 1); // schedules another render on every render
  return <div>{state}</div>;
}
```

此规则的**正确**代码示例：

```jsx
import { useState } from "react";
function Component() {
  const [state, setState] = useState(0);
  return <button onClick={() => setState(state + 1)}>{state}</button>;
}
```

## 如何使用

## 版本

此规则在 v1.79.0 中添加。

## 参考