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时，它会显示＆＃34; loading＆＃34;当this.props.ui.list.loading变为false时，它会显示供应商列表。

现在，我想将suppliersList提取到自己的组件中，最后有三个组件：

SuppliersPage
List
ListRow

所以我这样做：

// 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>
    );
  }
}

正如您所看到的，我已经删除了创建供应商列表的所有逻辑，并使用它来呈现表格。

我已经在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>
  );
};

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

但问题出现了：运行此代码会引发错误：

未捕获的TypeError：suppliers.map不是函数在./assets/components/Business/Suppliers/List.jsx.exports.default(List.jsx：5）

所以，实际上，在我看来，如果我在this.props.suppliers.map(...)组件中Page一切正常，那么如果我将this.props.suppliers传递给子组件{{ 1}}并且做同样的事情，传递的值不再是数组。

有关正在发生的事情以及如何解决问题的任何想法？

我真的不明白为什么在List中抛出子组件时没有抛出任何错误：值应该是相同的，但似乎我错过了某些东西在我的想法中。

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

Answer 1

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

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

为什么同一个prop是父组件中的数组，如果传递给子组件则不再是数组

1 个答案: