React白屏问题排查：注释特定代码为何能解决？

1. 排查he.decode的异常情况 #

你引入he.decode处理字段后，大概率是某个字段（比如question、correct_answer）为null/undefined，或者格式异常，调用he.decode时抛出了错误，但React在某些场景下（比如热更新）没把错误打印到控制台，直接导致组件崩溃白屏。

解决办法：给解码加安全兜底：

• 先写一个安全解码的工具函数：

const decodeSafely = (str) => {
  try {
    return str ? he.decode(str) : '';
  } catch (err) {
    console.error('解码失败:', err);
    return str || '';
  }
}

• 然后在生成组件时使用这个函数：

const questionElements = data.map(item => (
   <Questions 
      key={item.id}
      type={item.type}
      question={decodeSafely(item.question)}
      correct_answer={decodeSafely(item.correct_answer)}
      incorrect_answers={item.incorrect_answers.map(decodeSafely)}
   />
))

2. 检查data的初始状态 #

如果你的data初始值是undefined或null（比如用useState()而不是useState([])初始化），组件挂载初期调用data.map会直接报错，导致白屏。

解决办法：

• 确保data初始化为空数组：

const [data, setData] = useState([]);

• 或者在map前加可选链判断，避免报错：

const questionElements = data?.map(item => (
   // ...组件代码
)) || [];

3. 检查Questions组件内部逻辑 #

可能是Questions组件处理解码后的内容时出了问题，比如用dangerouslySetInnerHTML渲染了非法HTML（未闭合标签等），或者组件内有未处理的逻辑错误。

解决办法：

• 先简化Questions组件，只渲染纯文本，看是否还会白屏：

const Questions = (props) => {
  return <div>{props.question}</div>;
}

• 如果恢复正常，再逐步加回原来的逻辑，定位具体出错的地方。

4. 强制捕获React错误 #

有时候错误被React吞掉，你可以给App加个错误边界组件，捕获并打印错误：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('组件错误:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>出问题了。</h1>;
    }
    return this.props.children; 
  }
}

然后把App用这个组件包裹：

ReactDOM.render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>,
  document.getElementById('root')
);

这样就能看到原本没显示的错误信息，精准定位问题。

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