React中如何在alert弹窗中正确显示const定义的随机数值

嘿，这个小问题我太熟悉啦！你现在看到的[object Object]，是因为你传给alert()的不是那个随机数值，而是一个JavaScript对象。

问题根源 #

当你写alert({random})的时候，在JS里这是一种简写语法，等价于alert({ random: random })——也就是创建了一个键为random、值为你生成的随机数的对象。而alert()函数如果接收到对象参数，会自动把它转换成字符串，结果就是[object Object]，自然看不到你想要的数字啦。

修正方案 #

这里有几种简单的修改方式，任选其一都能解决问题：

1. 直接传入随机数变量
   既然random本身就是你要的数值，直接把它传给alert()就行：

   const random = Math.round(Math.random() * 10000000);
   const handleClick = () => { alert(random) };
   

2. 用模板字符串添加说明文字
   如果想在弹窗里显示更友好的内容（比如标注这是随机数），可以用ES6的模板字符串：

   const random = Math.round(Math.random() * 10000000);
   const handleClick = () => { alert(`生成的随机数是：${random}`) };
   

3. 传统字符串拼接
   如果你需要兼容更老的JS环境，也可以用字符串拼接的方式：

   const random = Math.round(Math.random() * 10000000);
   const handleClick = () => { alert("生成的随机数是：" + random) };
   

这样修改之后，点击触发handleClick时，alert弹窗就会正确显示你生成的随机数值啦！

内容的提问来源于stack exchange，提问作者Henrik