反应不从 useEffect 渲染数据

Question

我正在尝试 React hooks，我对我所看到的感到非常困惑。我从我的端点获取一个 JS 对象作为有效负载，如果我传递原始结果，这将显示和渲染良好：

...
import React, { useEffect, useState } from 'react'

const Status = () => {
  const [data, setData] = useState({})

  useEffect(() => {
    console.log('fetching status')
    const start = new Date()
    getStatus()
    .then(result => {
      console.log(`status fetched in ${(new Date() - start)}`)
      for (const key of Object.keys(result)) {
        if (!data[key]) {
          data[key] = {}
        }
        data[key]['status'] = result[key]
      }
      console.log(data);
      setData(result)
    })
    .catch(err => console.error(err))
  }, [])
  return (
    <div>
      { console.log('rendering')}
      <h1>Status</h1>
      <span>{JSON.stringify(data)}</span>
    </div>
  )
}

export default Status

... 我按预期得到了两个 "rendering" 日志。

但是当我将其更改为实际使用处理后的数据时：

...
import React, { useEffect, useState } from 'react'

const Status = () => {
  const [data, setData] = useState({})

  useEffect(() => {
    console.log('fetching status')
    const start = new Date()
    getStatus()
    .then(result => {
      console.log(`status fetched in ${(new Date() - start)}`)
      for (const key of Object.keys(result)) {
        if (!data[key]) {
          data[key] = {}
        }
        data[key]['status'] = result[key]
      }
      console.log(data);
      setData(data) // <--- here
    })
    .catch(err => console.error(err))
  }, [])
  return (
    <div>
      { console.log('rendering')}
      <h1>Status</h1>
      <span>{JSON.stringify(data)}</span>
    </div>
  )
}

export default Status

我没有得到第二次呈现，信息也没有呈现在页面上。正如我在 console.log 语句中验证的那样，数据就在那里。

Answer 1

原因是您将同一个对象传递给 setData，这不会导致 re-render，因为它是同一个对象。

React 基本上是在做这个 currentState === newStateFromSetState 这将 return 正确，因为它是相同的 object 参考。

您需要像这样向 setData 传递一个新对象

setData({ ...data });

这将确保传递给 setData 的 object 与 object 不同，但最好构建一个新的 object 而不是改变当前一个。

const updatedData = { ...data }

for (const key of Object.keys(result)) {
  if (!updatedData[key]) {
    updatedData[key] = {}
  }
  updatedData[key]['status'] = result[key]
}

console.log(data)
setData(updatedData)

反应不从 useEffect 渲染数据

React not rendering data from useEffect

javascript

reactjs

react-hooks