React Native 如何防止setState()字符串化我的数组?

mum43rcc  于 2023-01-09  发布在  React
关注(0)|答案(2)|浏览(118)

我有一个函数eventQuery,它从Firebase DB中获取数据。我可以看到数据被成功提取,并返回我所理解的数组的数组,每个数组由一个字符串和一个对象组成。首先,我的代码:

const [activeDate, setActiveDate] = useState(new Date())
  const [existingEvents, setExistingEvents] = useState({})

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

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

promise中console.log(data)的输出将生成以下形式的内容:

[["String1.1", {"String1.2": "String1.3", "String1.4": "String1.5", "String1.6": "String1.7"], ["String2.1", {etc.}], ["String3.1", {etc.}]]

但是,当我使用setExistingEvents(data)将该数组传递给existingEvents,然后在控制台上记录新值时,结果是:

existingEvents equals: String1.1,[object Object],String2.1,[object Object],String3.1,[object Object]

据我所知,setState()实际上是在我的数组数组上运行toString()。我做错了什么吗?还是这是函数的固有部分?非常感谢您的帮助。

nwsw7zdq

nwsw7zdq1#

您的console.log语句实际上是输出看起来像existingEvents被字符串化的原因(setState没有字符串化参数)。
取代:

useEffect(() => {
    // `existingEvents` is coerced to a string
    console.log('existingEvents equals: ' + existingEvents)
  }, [existingEvents])

它应该是:

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

另外,第二个.then()函数应该是:

.then(() => setExistingEvents('')) // not .then(setExistingEvents('')) <- this causes setExistingEvents('') to be called immediately
h43kikqp

h43kikqp2#

你的问题是你使用了字符串追加

console.log('existingEvents equals: ' + existingEvents)

如果希望整个数据都是字符串格式,可以使用JSON.stringify

console.log('existingEvents equals: ' + JSON.stringify(existingEvents))

或者在console.log中使用分隔符,

console.log('existingEvents equals: ', existingEvents)

相关问题