Question

我是React Native的新手。

我想调用一个函数来格式化一个值的千位分隔符。这是我的代码：

构造函数：

 this.state = {
            myValue: 10000000000,
 }

渲染：

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

实用程序：

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

我尝试了以下解决方案，并且有效。在componentDidMount中调用formatValueWithThousandSeparator方法，并在同一方法中设置格式化值的状态。

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

格式为ValueWithThousandSeparator ...

    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>
          )
        }

React Native-无法在<text>之间调用函数

2 个答案: