React Native - Невозможно вызвать функцию между <Text>

Question

Я новичок в React Native.

Я хочу вызвать функцию для форматирования разделителя тысяч значения.Вот мой кусок кода:

Конструктор:

 this.state = {
            myValue: 10000000000,
 } 

Визуализация:

<Text> {Util.formatValueWithThousandSeparator(this.state.myValue)}</Text>

Util:

formatValueWithThousandSeparator: async(plainValue) => {
        let formatFloat = parseFloat(plainValue);
        formatFloat = Math.floor(formatFloat);
        let formatted = 0;

        if (Platform.OS === 'ios'){
            formatted = await formatFloat.toLocaleString('en-US', {minimumFractionDigits: 0});
        } else {
            formatted = await formatFloat.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

        return formatted;
    }

Сообщение об ошибке:

Invariant violation: Object are not valid as react child (found: object with keys). If you meant to render a collection of children, use an array instead.

Мой вопрос:

Каклучшее решение для достижения того, что я делаю?(отформатируйте разделитель тысяч, прежде чем он появится)

Answer 1

Я бы просто удалил асинхронные и ожидающие вещи, которые я считаю бесполезными в этом случае.Методы, которые вы используете, являются синхронными.

Я не очень уверен, но я думаю, что из-за того, что React пытается выполнить обещание до его разрешения.

Answer 2

Я попробовал следующее решение, и оно работает.Вызовите метод formatValueWithThousandSeparator в componentDidMount и задайте состояние форматированного значения в том же методе.

componentDidMount(){
  this.formatValueWithThousandSeparator(this.state.myValue);
}

В formatValueWithThousandSeparator ...

    this.setState({formatted})
    return formatted;

А затем выполните условное представление.

      if(this.state.formatted){
            return (
              <View style={{flex:1}}>
                    <Text>{this.state.formatted}</Text>
               </View>

            );
        }
        else {
          return (
            <View style={{flex:1}}>
                <Text>No value to format..</Text>
            </View>
          )
        }