为什么 try...catch 在渲染函数中不起作用？

Question

这只是一个示例，不是我的原始代码。我在 App 组件的渲染函数中编写了一个 try...catch 块。在应用程序组件中，我想渲染一个 antd 表。有时，我的表的数据未定义，我们无法访问未定义对象的属性，因此我们会收到错误。但此错误不会捕获。

这是 stackblitz 中此示例的源代码。

import React from 'react';
import './index.css';
import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text) => {
      text = undefined 
      return <a>{text.name}</a>
    },
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
];

const App = () => {
  try{
    return (
      <div>
        <Table
          columns={columns}
          dataSource={data}
        />
      </div>
    );
  }
  catch(error){
    console.log("error")
  }
};

export default App;

我希望这个错误发生在 antd Table 中列的渲染函数中，该函数通过 App 组件中的 try...catch 块捕获。

Answer 1

try catch 用于异步函数调用，如网络获取，如果你想有条件地渲染组件，你可以使用 Hooks