React点击按钮设置TextField值遇渲染错误及后续问题求助

第一个错误：Too many re-renders. React limits the number of renders to prevent an infinite loop #

这个坑其实挺常见的，核心原因很直白：你给Button写的onclick（注意React里事件名是驼峰式的onClick）直接传了campaignAmount(300)，这相当于每次组件渲染时都会立刻执行这个函数，而函数里调用了setTxtValue触发组件重渲染，重渲染又会再次执行函数，直接形成无限循环。

正确的做法是给onClick传一个回调函数，只有点击时才会执行：

// 错误写法：渲染时直接执行函数
<Button onclick={campaignAmount(300)}>$300</Button>

// 正确写法：传递回调，点击触发执行
<Button onClick={() => campaignAmount(300)}>$300</Button>

第二个错误：'setTextValue' is not defined no-undef #

这个是典型的笔误：你用useState声明的状态更新函数是setTxtValue，但在事件处理函数里写成了setTextValue，少了个x。另外还有几个小问题需要修正：

1. 函数组件里根本不需要用this，所以this.schemaTypeSelectionHandle.bind(this)完全没必要
2. 你把onClick加到了ButtonGroup上，应该给每个Button单独绑定点击事件
3. TextField的value处理逻辑太冗余，既然初始值已经设为"0"，直接用txtValue就行

完整修复后的代码 #

import { useState } from 'react';
import { Grid, ButtonGroup, Button, TextField } from '@mui/material'; // 假设你用的是Material UI组件

export default function CampaignAmountSelector() {
  // 初始值设为"0"，匹配TextField的字符串值类型
  const [txtValue, setTxtValue] = useState("0");

  // 简化事件处理，直接接收金额值
  const handleAmountSelect = (amount) => {
    setTxtValue(amount.toString());
  };

  return (
    <Grid container>
      <Grid item lg={6}>
        <ButtonGroup color="primary" aria-label="outlined primary button group">
          {/* 给每个Button绑定点击回调，传递对应金额 */}
          <Button onClick={() => handleAmountSelect(300)}>$300</Button>
          <Button onClick={() => handleAmountSelect(500)}>$500</Button>
          <Button onClick={() => handleAmountSelect(1000)}>$1000</Button>
        </ButtonGroup>
      </Grid>
      <Grid item lg={3}>
        {/* 直接使用txtValue作为输入框值，无需额外判断 */}
        <TextField 
          id="campaignAmount" 
          name="campaignAmount" 
          margin="none" 
          fullWidth 
          value={txtValue} 
          variant="outlined" 
          required={true} 
        />
      </Grid>
    </Grid>
  );
}

关键知识点梳理 #

• React事件名必须用驼峰式（比如onClick，不是原生的onclick）
• 事件处理函数必须传递回调引用，不能直接执行（否则会触发无限重渲染）
• 函数组件中不需要使用this，直接调用声明的状态和函数即可
• 状态更新函数的名称要和useState返回的完全一致，别犯笔误

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