如何避免setState()将我的数组转换为字符串？

你的代码存在两个关键问题，导致了当前的现象：

1. Promise链的错误调用 #

你在Promise链中写了 .then(setExistingEvents(''))，这是错误的写法：

• then方法需要接收一个函数作为回调，但你这里直接执行了setExistingEvents('')，并将它的返回值（undefined）传给了then。
• 这会导致在eventQuery(activeDate)的Promise还未resolve时，就提前调用了setExistingEvents('')，把existingEvents设置为空字符串。之后当Promise返回数据时，又执行setExistingEvents(data)覆盖了这个值，但这个多余的操作完全没必要，甚至会导致状态的不必要波动。

修复方式：直接删除这一行代码，你的Promise链应该只保留获取数据并设置状态的逻辑：

useEffect(() => {
  eventQuery(activeDate)
    .then(data => {
      setExistingEvents(data);
      console.log(data)
    })
    .catch(err => console.log('no events'))
}, [activeDate])

2. 控制台打印的字符串拼接问题 #

你使用 console.log('existingEvents equals: ' + existingEvents) 打印状态时，用+进行字符串拼接会触发JS的类型转换：

• 数组调用toString()方法时，会将所有元素转为字符串后用逗号分隔；
• 对象调用toString()方法时，会返回[object Object]。
  这就是你看到String1.1,[object Object],...的原因，并不是setState对数组执行了toString()，而是打印方式导致的。

修复方式：用逗号分隔console.log的参数，这样控制台会保留数组和对象的原始结构，方便查看：

useEffect(() => {
  console.log('existingEvents equals:', existingEvents)
}, [existingEvents])

另外补充一点：你的existingEvents初始状态是{}（对象），但实际要存储的是数组的数组，建议初始状态改为[]，保持类型一致：

const [existingEvents, setExistingEvents] = useState([])

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