為什么當 function 組件中的 state 發生變化時，它會以 2 的倍數運行？

Question

我有一些問題要回應。 這不是什么大問題，但我不明白。

我制作了一個組件，其中新數據不斷添加到數據中。 首先出現兩個控制台日志是有道理的。 因為掛載和更新。 但是下一個周期，這是我的問題。為什么會出現4個控制台日志？ 然后 8.. 然后 16.. 然后 32..

這是代碼。

import React, { useState } from 'react'

const Ex = () => {
    const [state, setstate] = useState({ test: 'data' })
    const handleDate = () => {
        const { test } = state
        const data = 'new data'
        setstate({ test: test + data })
        console.log(`test: ${test}`);
    }
    setTimeout(handleDate, 3000);
    return (
        <div>
            <span>Result: {state.test}</span>
        </div>
    )
}

export default Ex

Answer 1

似乎每次 state 更改時，您的組件都會呈現兩次，無論出於何種原因，React 最了解。 現在每次渲染時，它都會調用 setTimeout 以在 3 秒內觸發 state 更改。 這些更改中的每一個都會觸發另外兩次渲染，這又會生成另外兩個 setTimeout，每個都會導致組件再次渲染兩次，依此類推。

你應該使用 useEffect 鈎子來獲得你想要的結果，即一個自我更新的組件，而不是在渲染中設置一個 setTimeout。 看到這個答案： 反應鈎子 - 清除超時和間隔的正確方法