Не можете использовать прототип массива .find в компоненте без учета состояния React?

Question

Мое приложение рендерит этот компонент:

<LabelTop orderNumber={order.id} shippingMethodName={getShippingMethod(order.shipping_lines)} customerName={order.billing.first_name + " " + order.billing.last_name}/>

getShippingMethod() - это простой форматер в том же файле.

const getShippingMethod = (shipping_lines) => {
  const metaObj = shipping_lines.find(meta => meta.method_title !== "")
  return metaObj.method_title
}

Если я рефакторину для перемещения getShippingMethod() на сам компонент, я получаю ошибку, что .find не является методом.

export const LabelTop = props => {

const getShippingMethod = (shipping_lines) => {
  const metaObj = shipping_lines.find(meta => meta.method_title !== "")
  return metaObj.method_title
}

return (
  <div>
    <div>
      <img src={LogoIcon} alt="Logo"/>
      <div>{props.orderNumber}</div>
    </div>
    <div>
      <div><span>Method:</span> {getShippingMethod(props.shippingMethodName)}</div>
      <div><span>Customer:</span> {props.customerName}</div>
    </div>
  </div>
)
}

Почему?

Answer 1

Вы не передаете правильные аргументы функции. Вы должны передать props.shipping_lines методу

export const LabelTop = props => {

    const getShippingMethod = (shipping_lines) => {
      const metaObj = shipping_lines.find(meta => meta.method_title !== "")
      return metaObj.method_title
    }

    return (
      <div>
        <div>
          <img src={LogoIcon} alt="Logo"/>
          <div>{props.orderNumber}</div>
        </div>
        <div>
          <div><span>Method:</span> {getShippingMethod(props.shipping_lines)}</div>
          <div><span>Customer:</span> {props.customerName}</div>
        </div>
      </div>
    )

}

Однако лучше написать метод вне Functional component, так как в противном случае новый экземпляр функции будет создаваться при каждом рендеринге LabelTop компонента

РЕДАКТИРОВАТЬ: Может случиться так, что компонент не получает реквизит в правильном формате. Как упоминалось в комментариях, несколько экземпляров компонента визуализируются, и все экземпляры не получают реквизит в виде массива, и, следовательно, это может привести к ошибке.