React中useState结合Array.prototype.join()报错求助

你这段代码第一次执行时，calcNumbers是数组，调用join('')能正常得到字符串并更新状态，但状态更新后，calcNumbers就变成了字符串类型。如果后续这段代码再次执行（比如放在点击事件、useEffect这类会重复触发的逻辑里），字符串是没有join()方法的，自然就抛出类型错误了。

解决方案 #

• 如果只是需要用到拼接后的字符串展示，没必要修改原数组状态，直接在需要的地方调用calcNumbers.join('')即可：

import { useState } from "react";

const [calcNumbers, setCalcNumbers] = useState(['1', '2', '3','4'])

// 渲染或使用时直接处理
<div>{calcNumbers.join('')}</div>

• 如果确实需要保存拼接后的结果，新增一个独立状态来存字符串，不要修改原数组状态：

import { useState } from "react";

const [calcNumbers, setCalcNumbers] = useState(['1', '2', '3','4'])
const [joinedResult, setJoinedResult] = useState('')

// 当需要生成拼接字符串时调用
const handleJoin = () => {
  setJoinedResult(calcNumbers.join(''))
}

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