传递道具时出错:未捕获的TypeError:billingItem.map不是函数

时间:2018-11-29 16:23:22

标签: javascript reactjs

我有这个子组件:

const TableExpandedRowItem = ({ dataTitle, rowValue, cellClassProp }) => (
  <div data-title={dataTitle} className={cellClassProp}>
    <p>{rowValue}</p>
  </div>
);

我将其传递给其父级以创建迭代:

const TableExpandedRowWrapper = ({ rowClassProp, billingItem }) => (
  <div className={rowClassProp}>
    {billingItem.map(key => (
      <div>
        <TableExpandedRowItem
          dataTitle={billingItem[key].description}
          rowValue={billingItem[key].description}
        />
        <TableExpandedRowItem
          dataTitle={billingItem[key].recurringFee}
          rowValue={billingItem[key].recurringFee}
        />
      </div>
    ))}
  </div>
);

我收到此错误:

  

未捕获的TypeError:billingItem.map不是函数

在这里我需要称呼它

{rowExpanded.billingItems &&
  rowExpanded.billingItems.map(item =>
      rowExpanded.id === item.cancellationRequestId && (
        <div className="row" key={item.id}>
          // HERE
          <TableExpandedRowWrapper billingItem={item.billingItem} />

...

更新:

如果我在没有包装器组件的情况下直接调用组件TableExpandedRowItem,则它将按应有的方式工作:

{rowExpanded.billingItems &&
  rowExpanded.billingItems.map(item =>
      rowExpanded.id === item.cancellationRequestId && (
        <div className="row" key={item.id}>
          <TableExpandedRowItem
            dataTitle={item.billingItem.description}
            rowValue={item.billingItem.description}
          />
          <TableExpandedRowItem
            dataTitle={item.billingItem.recurringFee}
            rowValue={item.billingItem.recurringFee}
          />
        </div>
      ),
  )}

我想将其带到另一个组件上,这是我在TableExpandedRowWrapper上尝试做的事情:

       <div className="row" key={item.id}>
          <TableExpandedRowItem
            dataTitle={item.billingItem.description}
            rowValue={item.billingItem.description}
          />
          <TableExpandedRowItem
            dataTitle={item.billingItem.recurringFee}
            rowValue={item.billingItem.recurringFee}
          />
        </div>

因此,基本上,我需要将TableExpandedRowItem放入包装器中,并按上面所示进行调用。

0 个答案:

没有答案