React类组件按钮onClick首次渲染触发及调试顺序问题咨询

1. onClick未点击就触发的原因 #

按钮的onClick属性要求传入函数引用，但你写的onClick={this.show('input')}是直接调用了show方法，把执行后的返回值（此处为undefined）传给了onClick。组件首次渲染执行render函数时，这段代码会立即执行show方法，自然不需要点击按钮就触发了。

2. debugger执行顺序的原因 #

fetcher是async函数，当show里调用this.fetcher(inputValue)时：

1. 进入fetcher执行debugger1，遇到await fetch(...)时，async函数会暂停执行，把线程让给同步代码；
2. 回到show方法继续执行，触发debugger3；
3. 等fetch请求完成拿到响应后，才会回到fetcher里继续执行后续代码，触发debugger2。
   所以最终顺序是debugger4 → debugger1 → debugger3 → debugger2。

代码优化建议 #

• 修复点击事件绑定：把onClick={this.show('input')}改成onClick={() => this.show('input')}，这样才是把函数绑定给点击事件，只有点击时才会执行show。如果要读取输入框真实值，不要硬传字符串，建议用组件状态管理输入值：

  constructor(props) {
    super(props);
    this.state = { inputValue: '' };
  }
  
  handleInputChange = (e) => {
    this.setState({ inputValue: e.target.value });
  }
  
  // 按钮与输入框修改后
  <button onClick={() => this.show(this.state.inputValue)}>Fetch</button>
  <input type='text' id='UIForProfile' value={this.state.inputValue} onChange={this.handleInputChange} />
  

• 处理async函数返回值：show里调用fetcher时，要处理Promise结果，否则无法拿到API数据：

  show = async (inputValue) => {
    try {
      const data = await this.fetcher(inputValue);
      this.setState({ infoHolder: data });
    } catch (error) {
      console.error('请求失败:', error);
    }
    debugger; // debugger3
  }
  

• 完善错误处理：fetch只有网络错误才会触发catch，HTTP状态码错误（如404、500）不会进入catch，需要手动判断：

  fetcher = async (userName) => {
    debugger; // debugger1
    const resp = await fetch(ApiBaseUrl + userName);
    if (!resp.ok) {
      throw new Error(`HTTP错误：${resp.status}`);
    }
    try {
      debugger; // debugger2
      const data = await resp.json();
      return data;
    } catch (error) {
      console.error('解析JSON失败:', error);
      throw error;
    }
  }
  

• 避免内存泄漏：如果组件卸载时请求还未完成，应该取消请求：

  componentWillUnmount() {
    this.abortController?.abort();
  }
  
  fetcher = async (userName) => {
    this.abortController = new AbortController();
    debugger; // debugger1
    try {
      const resp = await fetch(ApiBaseUrl + userName, {
        signal: this.abortController.signal
      });
      if (!resp.ok) {
        throw new Error(`HTTP错误：${resp.status}`);
      }
      debugger; // debugger2
      const data = await resp.json();
      return data;
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('请求失败:', error);
        throw error;
      }
    }
  }
  

• 推荐使用函数组件：React官方更推荐函数组件+Hook的写法，代码更简洁：

  import { useState, useEffect, useRef } from 'react';
  
  function App() {
    const [inputValue, setInputValue] = useState('');
    const [infoHolder, setInfoHolder] = useState(null);
    const abortControllerRef = useRef(null);
  
    const fetcher = async (userName) => {
      abortControllerRef.current = new AbortController();
      try {
        const resp = await fetch(ApiBaseUrl + userName, {
          signal: abortControllerRef.current.signal
        });
        if (!resp.ok) {
          throw new Error(`HTTP错误：${resp.status}`);
        }
        const data = await resp.json();
        return data;
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error('请求失败:', error);
          throw error;
        }
      }
    };
  
    const show = async () => {
      try {
        const data = await fetcher(inputValue);
        setInfoHolder(data);
      } catch (error) {
        // 处理错误
      }
    };
  
    useEffect(() => {
      return () => {
        abortControllerRef.current?.abort();
      };
    }, []);
  
    return (
      <>
        <label>Please enter the name of the profile you would like to show information for :</label>
        <br />
        <input
          type='text'
          id='UIForProfile'
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <br />
        <button onClick={show}>Fetch</button>
        {infoHolder && <div>{JSON.stringify(infoHolder)}</div>}
      </>
    );
  }
  

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