调试使用ES6隐式返回的React函数式组件遇到难题

哈哈，我完全懂这种困扰——ES6箭头函数的隐式返回写起来简洁又流畅，但真要调试的时候，总感觉“无从下手”？别担心，这里有几个实用的方法帮你轻松搞定：

1. 临时转为显式返回，插入调试代码 #

这是最直接的办法：把原来的隐式返回() => (...)改成带大括号的显式返回，这样就能在里面加console.log或者debugger语句了。

比如你的原代码：

const TableRow = ({ product, deleteProduct }) => (
  <tr>
    { Object.keys(product).map( (key) => (
      <td key={tdKeys++}>{product[key]}</td>
    )) }
    <td>
      <button className="productsTable__deleteButton" onClick={() => deleteProduct(product.id)}>
        Delete
      </button>
    </td>
  </tr>
)

改成显式返回后：

const TableRow = ({ product, deleteProduct }) => {
  // 这里加调试代码
  console.log('当前渲染的product:', product);
  // 甚至可以加断点
  debugger;
  
  return (
    <tr>
      { Object.keys(product).map( (key) => (
        <td key={tdKeys++}>{product[key]}</td>
      )) }
      <td>
        <button className="productsTable__deleteButton" onClick={() => deleteProduct(product.id)}>
          Delete
        </button>
      </td>
    </tr>
  )
}

调试完成后，再改回隐式返回就行啦。

2. 在JSX中直接嵌入调试表达式 #

如果你不想改组件的结构，还可以直接在JSX里插入调试用的表达式——因为JSX支持在{}中放任意合法的JavaScript表达式。

比如在<tr>里加一行：

const TableRow = ({ product, deleteProduct }) => (
  <tr>
    {/* 直接在这里插入调试代码 */}
    {console.log('渲染中的product:', product)}
    { Object.keys(product).map( (key) => (
      <td key={tdKeys++}>{product[key]}</td>
    )) }
    <td>
      <button className="productsTable__deleteButton" onClick={() => deleteProduct(product.id)}>
        Delete
      </button>
    </td>
  </tr>
)

这样每次组件渲染时，控制台都会输出product的值。你也可以用{debugger}代替console.log，触发浏览器的断点调试。

3. 用React DevTools直接检查组件 #

别忽略了React官方的调试神器——React DevTools！不管是隐式还是显式返回的组件，它都能帮你查看组件的props、状态，甚至追踪渲染原因。

操作步骤很简单：

• 打开浏览器的开发者工具，切换到Components标签（安装React DevTools后才会出现）
• 在组件树里找到你的TableRow组件
• 在右侧面板里就能看到它接收的product和deleteProduct props，还能直接修改props的值来测试组件行为

这个方法不用改任何代码，是日常调试React组件的首选！

4. 调试循环内的每一项 #

如果你的问题是要调试map循环里的每个key和对应的product[key]，可以单独把循环里的隐式返回箭头函数改成显式的：

{ Object.keys(product).map( (key) => {
  console.log('当前循环的key:', key, '对应的值:', product[key]);
  return <td key={tdKeys++}>{product[key]}</td>
}) }

这样就能精准查看循环中每一项的内容了。

小提示 #

调试完成后，记得把临时的console.log或debugger删掉哦！如果怕忘，可以用环境变量控制调试代码，比如：

if (process.env.NODE_ENV === 'development') {
  console.log('仅在开发环境输出:', product);
}

这样生产环境就不会出现调试日志啦。

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