reactjs - How do I fix Object?

Question

I am using TextInputMask to set the currency. When I use it in the ListIstem element, it comes with other elements as "object".

Sample code:

<FlatList
  data={teams}
  renderItem={({item}) =>
    <ListItem
      title={item.team}
      subtitle={
        <TextInputMask
          type={'money'}
          options={{ precision: 2, separator: ',', delimiter: '.', unit: '' }}
          value={parseFloat(item.amount)}
        /> + 'Count: ' + item.count
      }
      bottomDivider={true}
    />
  }
  keyExtractor={this.keyExtractor}
/>

Output;

[object Object] Count: 6
``

Answer 1

试试这个：替换subtitle为ListItem：

subtitle={
  <div>
    <TextInputMask
      type={'money'}
      options={{ precision: 2, separator: ',', delimiter: '.', unit: '' }}
      value={parseFloat(item.amount)}
    />
    {'Count: ' + item.count}
  </div>
}

Answer 2

您正在将整数添加到对象，这就是它显示它的原因。TextInoutMask 组件将 suffixUnit 作为道具，您可以在那里直接给出 item.count 的值。

<TextInputMask
  type={'money'}
  options={{ precision: 2, separator: ',', delimiter: '.', unit: '', suffixUnit: `Count: ${item.count}` }}
  value={parseFloat(item.amount)}
/>

Answer 3

更改为带返回值的一。

<FlatList
  data={teams}
  renderItem={({item}) =>
    <ListItem
      title={item.team}
      subtitle={
        MaskService.toMask('money',parseFloat(item.amount), {
    unit: '',
    precision: 2,
    separator: ',',
    delimiter: '.'
}) + 'Count: ' + item.count
      }
      bottomDivider={true}
    />
  }
  keyExtractor={this.keyExtractor}
/>