Question

我尝试使用转换＆＃34; 8888888888＆＃34;的功能来格式化电话号码。进入＆＃34; (888)888-8888＆＃34; ：

function phoneFormat(phone) {

  console.log(phone);

  phone = phone.replace(/[^0-9]/g, '');
  phone = phone.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");

  console.log(phone);   

  return phone;
}

当我的json被硬编码时它起作用，但是当它从服务器中取出时，没有任何变化，我没有得到任何错误。

我尝试过控制台记录＆＃34; typeof＆＃34;，但在这两种情况下它们都会以字符串形式返回。

我尝试在组件安装后将状态设置为更新：

componentDidMount (){
  var formatPhone = phoneFormat(this.props.profile.phone)
  this.setState({phone: formatPhone})
},

并尝试调用内联函数。

获取功能：

fetchProfile() {

    fetch(PROFILE_API) 
        .then((response) => {
            return response.json();
        })
        .then((json) => {

            console.log(JSON.stringify(json))

            this.setState({
                profile: json
            });

        })
        .catch((error) => {

            this.setState({
                loading: 3
            });
        });


},

然后我将状态作为道具传递给组件视图。

Answer 1

我要做以下事情：

在多个浏览器和可能不同的计算机上测试它，以验证这不是您的开发计算机特有的问题。
尝试使用Js的string.replace（如http://www.w3schools.com/jsref/jsref_obj_regexp.asp）这样可以提供所需结果的其他Regex对象。

Answer 2

确保在promise上下文中未覆盖this变量，在这种情况下不调用setState方法

Answer 3

由于代码不是完整版本，我能想到的是：

你的状态“电话”实际上并不直接绑定到状态“profile”，因为你在componentDidMount（）中设置了“phone”值，它只运行一次。运行componentDidMount（）后，当您调用fetch（）时，设置状态“profile”将不会触发状态“phone”的更改。

如果是这种情况，我的建议是摆脱“手机”，并在渲染布局时调用phoneFormat（this.state.profile.phone），如此处所述（http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-shouldnt-go-in-state）

Answer 4

这是因为我的同事在数据库中的数字意外是9个字符而不是10个字符。

在获取时取代了对字符串的工作，但是在硬编码时也是如此

4 个答案: