在 React 中删除数组项时状态数组不更新

Question

当我从状态数组中删除数组项时，我也会在删除数组项后更新价格。但价格没有更新。我已经尝试了所有方法，但没有得到任何解决方案。

export default function CustomizerState(props) {
    const initialTextItem = {
        text: "Hello",
        neonPrice: 0,
        backplatePrice: 0,
        neonPower: 0,
        totalPrice: 0
    }
    const [settings, setSettings] = useState({
        textItems: [initialTextItem],
        libraryItems: [],
        accessories: [...],
        finalPrice: null
    })

    const removeItem = (id, itemType = "textItems") => {
        const filteredItems = settings[itemType].filter((item) => {
            return item.id !== id
        })
        setSettings((prevState) => (
            {...prevState, [itemType]: filteredItems}
        ))
        finalPrice()
    }

    const finalPrice = () => {
        const textItemsPrice = getTotalPrice()
        const libraryItemsPrice = getTotalPrice("libraryItems")
        const accessoriesPrice = getTotalPrice("accessories", "unitPrice")
        console.log(textItemsPrice, libraryItemsPrice, accessoriesPrice)

        const finalPrice = textItemsPrice + libraryItemsPrice + parseInt(accessoriesPrice)
        setSettings((prevState) => (
            {...prevState, finalPrice}
        ))
    }

    const getTotalPrice = (itemType = "textItems", priceKey = "totalPrice") => {
        let price = 0
        settings[itemType].map((item) => (
            price = price + (item[priceKey] * item.quantity)
        ))
        return price
    }

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

现在，当我删除任何项目时，它不会更新 finalPrice 对象项目，但当我删除另一个项目时，它会更新之前项目的价格。我不知道为什么会这样。

谁能看看我的代码并告诉我它有什么问题以及我该如何解决这个问题？

Answer 1

您在设置状态后立即呼叫 finalPrice() 触发 re-rendering。您必须像这样使用 useEffect 挂钩来触发更改：

useEffect(() => {
  finalPrice()
}, [settings]

您可能应该考虑将价格与其他设置分开。

Answer 2

与其在更新列表后立即调用函数，不如在之前进行计算并一起更新状态。您的方法的问题在于，在进行微积分时，状态尚未更新，因此当函数 finalPrice() 运行时，它采用先前的值。

真心推荐你用一个Reducer，一个状态那么多参数会很麻烦

参考useReducer，它会让你的生活更轻松。

在 React 中删除数组项时状态数组不更新

State array not updating when removing an array item in React

arrays

reactjs

use-effect