React组件添加if判断后无法渲染JSX，页面空白无报错

你直接在组件函数体中调用setbtnable，会触发组件无限重渲染：

• 组件首次渲染时执行if判断，调用setbtnable触发重新渲染
• 重新渲染时再次执行if判断，再次调用setbtnable又触发渲染
• 这个循环会被React拦截，最终导致组件无法完成渲染，页面显示空白

有两种可行的修复方式：

方式一：使用useEffect监听stoke变化 #

通过useEffect钩子，仅当stoke的值发生变化时才更新btnable状态，避免无意义的重复渲染：

import { useState, useEffect } from "react";
const Zoom = () => {
  const [btnable, setbtnable] = useState(true);
  const [stoke, setStoke] = useState("");

  useEffect(() => {
    setbtnable(stoke === "");
  }, [stoke]); // 仅当stoke变化时执行

  return (
    <div className="container">
      <span>Zoom</span>
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
        <tr>
          <td>10</td>
          <td>11</td>
          <td>12</td>
        </tr>
      </table>
      <br />
      <input
        type="number"
        placeholder="Stoke"
        onChange={(e) => {
          setStoke(e.target.value);
        }}
      />
      <button disabled={btnable}>Zoom</button>
    </div>
  );
};

export default Zoom;

方式二：直接计算btnable的值（推荐） #

不需要额外维护btnable状态，直接在使用时通过stoke的值计算得到，减少不必要的状态管理：

import { useState } from "react";
const Zoom = () => {
  const [stoke, setStoke] = useState("");
  // 直接计算按钮禁用状态
  const btnable = stoke === "";

  return (
    <div className="container">
      <span>Zoom</span>
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
        <tr>
          <td>10</td>
          <td>11</td>
          <td>12</td>
        </tr>
      </table>
      <br />
      <input
        type="number"
        placeholder="Stoke"
        onChange={(e) => {
          setStoke(e.target.value);
        }}
      />
      <button disabled={btnable}>Zoom</button>
    </div>
  );
};

export default Zoom;

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