React中useEffect请求API，修改num_of_sentences触发无限重渲染报错

错误原因 #

触发无限重渲染的核心问题有两个：

1. NumberInput的value类型不匹配：组件onChange回调返回的value是字符串类型，但你的num_of_sentences状态初始为数字类型。直接将字符串赋值给状态后，组件重渲染时NumberInput接收到字符串类型的value，内部会自动进行类型转换并再次触发onChange，形成"状态更新→重渲染→触发onChange→状态更新"的循环。
2. 空值解构导致的潜在问题：初始状态下avg_drop_count是空字符串，执行split("/")会得到[""]，解构给两个变量时total_sentences会是undefined，传给子组件GuageCustom后可能引发组件内部错误或额外重渲染，加重循环问题。

修复步骤 #

1. 统一NumberInput的状态类型

修改NumberInput的onChange回调，将返回的value转为数字后再更新状态：

<NumberInput
  id="num_of_sentences"
  label="how many sentences"
  value={num_of_sentences}
  onChange={(e, { value, direction }) => set_num_of_sentences(Number(value))}
/>

2. 处理空值解构的情况

对avg_drop_count的解构增加空值判断，避免出现undefined：

const [avg_sentences, total_sentences] = avg_drop_count?.split("/") || [0, 0];

3. 可选：增加API请求错误处理

在fetchData中添加try-catch，避免请求失败导致的状态异常：

useEffect(() => {
  async function fetchData() {
    try {
      const res = await axios.get(
        `/api/v1/statistics/conversation/${id}?start_time=${start_time}&end_time=${end_time}&topFailedSentences=${num_of_sentences}`
      );
      set_data(res.data);
    } catch (err) {
      console.error('获取统计数据失败:', err);
      // 可根据需求添加用户提示逻辑
    }
  }
  fetchData();
}, [start_time, end_time, num_of_sentences]);

修复说明 #

• 强制将num_of_sentences转为数字类型，保证状态类型始终一致，NumberInput接收到匹配类型的value后不会触发额外的onChange事件，彻底打破无限循环。
• 空值处理避免了undefined传递给子组件，消除了潜在的渲染异常。
• 错误处理可以让你在API请求失败时及时排查问题，避免无意义的状态更新。

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