开发者问题收集

react-native 中的列表项错误‘1 不是函数’

2021-01-29
241

我正在使用“react-native-paper”中的 List 来显示订单列表。当我点击订单时,“显示订单总额和产品。 我添加了:

left = {product.quantity}

以便在产品左侧显示产品数量。 但是,此行给我一个错误:

TypeError: 1 is not a function (near '... left ...')

我的数据数组如下所示:

[   Object {
    "amount": 2671.25,
    "balance": 0,
    "client_id": 1,
    "created_at": "2020-05-06T17:42:26Z",
    "discount": 0,
    "discount_type": 0,
    "id": 19,
    "items": Array [
      Object {
        "cost": 2400,
        "currency": "EUR",
        "description": "",
        "name": "Apple MacBook Air 15'' LED 500 Go SSD 32 Go",
        "product_id": 5,
        "quantity": 1,
        "tax_rate_id": 1,
      },
      Object {
        "cost": 54.25,
        "currency": "EUR",
        "description": "L’agrafeuse pince Rapid Maxi SP19 est conçue pour agrafer tous vos documents en toute simplicité. Ce modèle est capable d’agrafer jusqu’à 20 feuilles en une seule fois. Léger, il assure une prise en main agréable et facile. Robuste, cette agrafeuse convient à un usage fréquent pour les travaux d’emballage et de bureau. Elle peut contenir jusqu’à 210 agrafes SP19/6. Pratique, le stock d’agrafes est visible sur le côté pour que vous puissiez recharger l’agrafeuse à temps. Le chargement s'effectue facilement par l’arrière. Cet article est disponible en deux couleurs : chrome et rose. Il est livré avec 200 agrafes.",
        "name": "Agrafeuse pince Rapid Maxi SP 19 – capacité de 20 feuilles",
        "product_id": 2,
        "quantity": 5,
        "tax_rate_id": 4,
      },
    ],
    "po_number": "",
    "public_notes": "TEST 6 : Acomptes",
    "quote_date": "2020-05-06",
    "quote_number": "D1460019",
    "quote_status": 40,
    "terms": "",
    "updated_at": "2020-05-06T18:08:06Z",   },

我希望你能指导我找出问题所在。谢谢,这是我的代码;

<ScrollView>
      {this.state.displayArray !== null && this.state.displayArray.length > 0 ? (
        this.state.displayArray.map((item, i) => (
          <List.Section title={item.created_at.substring(0, 10)} titleStyle={{fontSize: 16, color: '#013243'}} key={i.toString()}>
            <List.Accordion
              title={item.quote_number}
              style={{width: '98%'}}
              left={props => <List.Icon {...props} color={'#F78400'} icon={require('../../../assets/images/logo-weecoop.png')} />}>
              <List.Item titleStyle={{color: '#F78400'}} title={`Total: ${item.amount} €`}/>
              {
                item.items.map((product, i) => (
                <List.Item 
                  title={product.name.substring(0, 30)} 
                  titleStyle={{fontSize: 14}} 
                  description={product.description} 
                  descriptionStyle={{fontSize: 11}}
                  descriptionNumberOfLines={4}
                  key={i.toString()}              
                  left={product.quantity}
                />                         
                ))
              }
            </List.Accordion>            
          </List.Section>
          ))
      ) : (
        <View style={styles.container}>
            <Text>{"\n\n" + (this.state.displayArray === null ? i18n.t("orders.search") : i18n.t("orders.nodata")) + "\n\n\n"}</Text>
            <Button
              color="#F78400"
              title= 'Back'
              onPress={() => this.props.navigation.goBack()}>BACK
            </Button>
          </View>
      )}
</ScrollView>
    );
  }
}
1个回答

您正在将 product.quantity 传递到左侧

但是文档说

left Type: (props: { color: string; style: { marginLeft: number; marginRight: number; marginVertical?: number; }; }) => React.ReactNode

Callback which returns a React element to display on the left side.

https://callstack.github.io/react-native-paper/list-item.html#left

如果您想在左侧显示数量,您应该这样做

left={()=>(<Text>product.quantity<Text>)}
Guruparan Giritharan
2021-01-29