如何在函数传递javascript时构造一个对象数组

Question

我试图使用功能组件重写todo应用程序，我无法找到一种方法来解构和对象数组。感谢任何帮助。

原始组件：

class ProductTable extends React.Component {
render() {
    let rows = [];
    let lastCategory = null;
    this.props.products.forEach(function(product) {
        if (product.category !== lastCategory) {
            rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
        }
        rows.push(<ProductRow product={product} key={product.name} />);
        lastCategory = product.category;
    });
    return (
        <table>
            <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
            </tr>
            </thead>
            <tbody>{rows}</tbody>
        </table>
    );
  }
}

我想写的功能组件：

const ProductTable = ({products = []}) => {
let rows = [];
let lastCategory = null;

products.forEach(function (product) {
    if (product.category !== lastCategory) {
        rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
    }
    rows.push(<ProductRow product={product} key={product.name} />);
    lastCategory = product.category;
});

return (
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Price</th>
        </tr>
        </thead>
        <tbody>{rows}</tbody>
    </table>
  );
};

FormalParameter可以限制性更强吗？

const ProductTable = ({products = []}) => ...