useEffect 对象依赖无限循环 - ReactJS

Question

我有一个 State in Context with Object。我是运行 useEffect 中的一个 async 函数，并将我的对象状态作为 dependency.

传递

I passed the state object as dependency because i want to re-render the component when values of settings object changes.

但它会导致无限循环。

更新：
让我更清楚我的问题。
在我的 useEffect 中，我正在调用我的异步函数 addTextItem()，它调用函数 finalPrice 并更新状态，但这样会导致无限循环。
另一方面，如果我直接在 useEffect 中调用 finalPrice 而不是调用 addTextItem 那么就没有无限循环但它也在更新状态，对吧？那怎么会这样。＆我需要一个解决方案，因为我已经尝试了所有方法但现在完全卡住了。

代码如下：

export default function CustomizerState(props) {
    const initialText = "Hello"
    const initialSize = {
        x: REACT_APP_SIZE_X,
        y: REACT_APP_SIZE_Y
    }
    const initialTextItem = {
        id: generateID(),
        text: "Hello",
        font: fonts[0].value,
        size: initialSize,
        color: colors[0],
        backplate: "cut-sharp",
        uvPrint: false,
        quantity: 1,
        neonPrice: 0,
        backplatePrice: 0,
        neonPower: 0,
        totalPrice: 0
    }
    const [settings, setSettings] = useState({
        textItems: [],
        libraryItems: [],
        ownDesigns: [],
        accessories: [
            // My Objects here
        ],
        finalPrice: 0
    })

    const addTextItem = async () => {
        const pathLength = await textToPath(initialText, initialSize.x)
        const { backplatePrice, neonPrice, neonPower, totalPrice } = calculateSvgPrice(pathLength)
        const id = generateID()

        const newItems = [
            ...settings.textItems,
            {...initialTextItem, id, backplatePrice, neonPrice, neonPower, totalPrice}
        ]
        
        finalPrice("textItems", newItems)
    }

    const finalPrice = (itemType = null, items = null) => {
        const textItemsPrice = getTotalPrice()
        const libraryItemsPrice = getTotalPrice("libraryItems")
        const accessoriesPrice = getTotalPrice("accessories", "unitPrice")

        const finalPrice = textItemsPrice + libraryItemsPrice + parseInt(accessoriesPrice)

        if (itemType === null) {
            setSettings((prevState) => (
                {...prevState, finalPrice}
            ))
            return false
        }

        setSettings((prevState) => (
            {...prevState, [itemType]: items, finalPrice}
        ))
    }

    useEffect(() => {
        // It will add first initial form item
        addTextItem()
    }, [JSON.stringify(settings)])

    return (
        <CustomizerContext.Provider value={{settings, addTextItem}}>
            {props.children}
        </CustomizerContext.Provider>
    )
}

我有 google 并尝试了解决方案，但没有任何效果。有人可以帮我解决这个问题吗？我卡住了....

Answer 1

勾选useEffect hook documentation。第二个参数数组传入的数组为依赖数组：

useEffect(() => {
    //hook code   
}, []);

依赖数组将使钩子代码在每次数组的任何变量发生变化时执行。在您的情况下，您正在更改调用本身产生无限循环的依赖项 settings。

Answer 2

我忘记了当 re-rendering 发生时，它也会运行s useEffect 并且它会导致 setState 一次又一次。
我设法通过创建一个名为 initialItemCount 且初始值为 0 的状态来解决此问题。我正在检查该状态值是否为 0 然后运行 addTextItem 这将添加我的初始表单项目并更新最终价格，但如果值为 1 那么只有运行 finalPrice 函数。

const [initialItemCount, setInitialItemCount] = useState(0)
useEffect(() => {
    if (initialItemCount === 0) {
        addTextItem()
        setInitialItemCount(1)
    }
    
    if (initialItemCount === 1) {
        finalPrice()
    }
}, [JSON.stringify(settings)])

最后，内心平静。

useEffect 对象依赖无限循环 - ReactJS

useEffect Object dependency infinite loop - ReactJS

javascript

object

reactjs

react-hooks

use-effect