Question

我有以下React Native组件：

import React, {useContext} from 'react';
import {View, Headline} from 'react-native';
import ShoppingCartEntry from './ShoppingCartEntry';
import ShoppingCartContext from '../../context/shoppingCart/shoppingCartContext';

const ShoppingCartList = () => {
  const {shoppingCart} = useContext(ShoppingCartContext);

  const TotalPriceDisplay = () => {
    let totalPrice = 0;

    shoppingCart.map((entry) => {
      totalPrice = totalPrice + (entry.product.price * entry.amount);
    })

    return (
      <View>
        <Headline>Total: {Intl.NumberFormat('US', { style: 'currency', currency: 'USD' }).format(totalPrice)}</Headline>
      </View>
    )
  }

  return (
    <View>
      <View>
        {shoppingCart.map((entry) => {
          return (
            <ShoppingCartEntry entry={entry} />
          )
        })}
      </View>
      <View>
        <TotalPriceDisplay />
      </View>
    </View>
  )
}

export default ShoppingCartList;

但是它会引发以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TotalPriceDisplay`

找不到错误的来源。

Answer 1

HeadLine不是react-native的一部分。

您应该从React Native纸中导入它。

import { Headline } from 'react-native-paper';

React Native组件无法渲染

1 个答案: