React组件调用setDocumentType后意外卸载问题排查

核心崩溃原因 #

1. DOM元素ID拼写错误
   在useEffect中你尝试获取id="spacial-div"的元素，但实际渲染的divid是special-div（少了一个'e'）。这会导致myDiv为null，执行myDiv.innerHTML = data时抛出TypeError: Cannot set properties of null (setting 'innerHTML')，直接引发组件崩溃停止渲染。

2. 按钮点击事件参数冲突
   按钮的onClick回调里，你把参数命名为type，这会覆盖外层map循环中的type变量。实际传入switchDocumentType的是鼠标事件对象（MouseEvent），而非预期的类型字符串（'alpha'/'beta'/'gamma'）。这会导致documentType被设置为非字符串值，触发useEffect执行后，进一步加剧错误。

其他优化点 #

3. React中避免直接操作DOM
   手动通过getElementById修改innerHTML不符合React的数据流模式，应该使用React提供的dangerouslySetInnerHTML属性来渲染原始HTML。

4. 请求未关联documentType
   当前myDataFetch的URL固定，没有根据documentType变化调整请求参数，导致每次切换类型都发送相同请求，浪费资源。

修复后的代码示例 #

import * as React from 'react';

const MyComponent = (props) => {
  const [documentType, setDocumentType] = React.useState('alpha');
  const [documentData, setDocumentData] = React.useState('');
  const types = ['alpha', 'beta', 'gamma'];

  React.useEffect(() => {
    // 根据documentType调整请求参数
    myDataFetch(`https://example.com/foo/?bar=123&type=${documentType}`)
      .then(async (response) => {
        const data = await response.json();
        setDocumentData(data.terms);
      })
      .catch(err => {
        // 增加错误捕获，避免请求失败导致组件崩溃
        console.error('数据获取失败:', err);
      });
  }, [documentType]);

  const switchDocumentType = (type) => {
    setDocumentType(type);
    // send some analytics events
  };

  const convertToPDF = () => {
    // uses documentData to generate PDF
  };

  return (
    <div className="container-div">
      {types.map((type) => {
        return (
          <button key={type} onClick={() => switchDocumentType(type)}>
            {type}
          </button>
        );
      })}
      {/* 使用dangerouslySetInnerHTML渲染原始HTML */}
      <div id="special-div" dangerouslySetInnerHTML={{ __html: documentData }} />
    </div>
  );
};

export default MyComponent;

关键修复说明 #

• 修正了div的ID拼写错误（修复后改用React方式渲染，不再需要手动获取DOM）。
• 调整按钮的onClick回调，移除冲突的参数名，确保传入正确的类型字符串。
• 用dangerouslySetInnerHTML替代手动DOM操作，符合React的渲染逻辑。
• 为请求增加错误捕获，避免请求失败时直接崩溃组件。
• 调整请求URL，根据documentType传入对应参数，保证请求数据和选中类型匹配。

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