React开发杂货清单程序时textarea显示多余逗号如何解决？

问题原因 #

你直接将数组类型的items绑定到了textarea的value属性上，JavaScript中数组隐式转换为字符串时，默认会用逗号,拼接所有数组元素，因此除了第一个元素外，后续每个元素前都会自动带上拼接产生的逗号。

比如你的items数组如果是["苹果\n", "香蕉\n"]，隐式转字符串后结果为"苹果\n,香蕉\n"，就出现了你看到的多余逗号。

修复方案 #

将textarea的value属性改为数组拼接后的纯字符串即可，修改代码如下：

<textarea 
  style={{margin: "30px", width: "300px",height: "300px"}} 
  value={items.join('')} 
  readOnly 
/> 

调用数组的join('')方法，指定用空字符串拼接所有数组元素，就不会产生多余的逗号了。

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