javascript - 为什么相同的 prop 在父组件中是数组，而如果传递给子组件则不再是数组

Question

我有这个组件:

class SuppliersPage extends React.Component {
  render() {
    const suppliersList = this.props.suppliers.map(supplier => (
      <ListRow name={supplier.name} key={supplier.id} />
    ));

    return (
      <div className="row">
        <div className="col-sm-4">
          <div className="Section boxed rounded">
            <ButtonNew />
            {
              this.props.ui.list.loading ? 'loading' :
              <table className="table table-hover table-condensed">
                <tbody>
                  { suppliersList }
                </tbody>
              </table>
            }
          </div>
        </div>
        <div className="col-sm-8">
          <div className="Section boxed rounded">
            <Form />
          </div>
        </div>
      </div>
    );
  }
}

效果很好:当 this.props.ui.list.loading 为 true 时，它显示“正在加载”，而当 this.props.ui.list 时，它显示“正在加载” .loading 变为 false 它显示 vendor 列表。

现在，我想将 suppliersList 提取到它自己的组件中，最终包含三个组件:

1. vendor 页面
2. 列表
3. 列表行

所以我这样做:

// Page.jsx

class SuppliersPage extends React.Component {
  render() {
    return (
      <div className="row">
        <div className="col-sm-4">
          <div className="Section boxed rounded">
            <ButtonNew />
            {this.props.ui.list.loading ? 'loading' : <List suppliers={this.props.suppliers} />}
          </div>
        </div>
        <div className="col-sm-8">
          <div className="Section boxed rounded">
            <Form />
          </div>
        </div>
      </div>
    );
  }
}

如您所见，我删除了创建 vendor 列表并用其呈现表格的所有逻辑。

我已将所有这些逻辑移至 List.jsx 中，即:

// List.jsx
export default (suppliers) => {
  const suppliersList = suppliers.map(supplier => (
    <ListRow name={supplier.name} key={supplier.id} />
  ));

  return (
    <table className="table table-hover table-condensed">
      <tbody>
        { suppliersList }
      </tbody>
    </table>
  );
};

没什么复杂的:我只是直接在 List 组件中处理 this.props.suppliers 数组。

但是问题来了:运行这段代码会抛出错误:

Uncaught TypeError: suppliers.map is not a function at ./assets/components/Business/Suppliers/List.jsx.exports.default (List.jsx:5)

所以，实际上，在我看来，如果我在 Page 组件中执行 this.props.suppliers.map(...) ，则一切正常好吧，如果我将 this.props.suppliers 传递给子组件 List 并执行相同的操作，则传递的值不再是数组。

关于发生了什么以及如何解决问题有什么想法吗？

我真的不明白为什么在 Page 中在子组件中抛出错误时没有抛出错误:值应该是相同的，但似乎我遗漏了一些东西我的想法。

你能帮助我更好地了解发生了什么吗？

Answer 1

List.jsx 的第一个参数是一个 props 哈希，它当然没有名为 map 的函数属性，就像错误消息所说的那样。假设您尝试在函数参数中使用对象简写，则需要添加一些花括号:

// List.jsx
export default ({suppliers}) => {
// ...