12、React开发中的错误处理、调试与样式设计

React开发中的错误处理、调试与样式设计

1. React中的函数调用引用与错误处理

在React开发中，函数调用引用有两种方式：
- onChange={handleQuantityChange} ：事件默认传递。
- onChange={(event) => handleQuantityChange(event)} ：使用箭头函数时，需要显式传递事件。

而 onChange={handleQuantityChange()} 这种写法会直接调用函数，而非引用，会立即抛出错误。我们可以通过控制台检测错误并解决问题。在修复错误前，为用户显示一个备用界面是个不错的做法。

2. 创建错误边界组件

由于无法在函数式组件中使用错误边界，我们可以使用JavaScript的 try-catch 块并结合状态来处理错误。具体操作步骤如下：
1. 在 just-food 项目中创建新组件 ErrorFunctionalBoundary.js ，代码如下：

const ErrorFunctionalBoundary = () => {
  return <h1 align="center">We'll be back shortly! Please check back</h1>;
};
export default ErrorFunction