useEffect()：如何重构componentDidUpdate？

Question

所以，我定义了一个状态：

const [quantity, setQuantity] = useState(1);

在我的 class 组件中，我更新如下：

    componentDidUpdate(prevProps, prevState) {
        if (this.props.cartItem.quantity !== prevProps.cartItem.quantity) {
            let quantity = this.props.cartItem.quantity;
            this.setState((state, props) => {
                return {
                    quantity
                }}
            );
        }
    }

    componentDidMount() {
        this.setState((state, props) => {
            return {
                quantity: props.cartItem.quantity
            }}
        );       
    }

我通过以下方式实现的 componentDidMount 方面：

    useEffect(() => {
      setQuantity(parseInt(props.cartItem.quantity));
    });

如何使用 useEffect() 实现相同的 componentDidUpdate() 功能？

Answer 1

您只需将 "dependency" 添加到您的 useEffect 挂钩即可。

const { cartItem } = props;

useEffect(() => {
  setQuantity(parseInt(cartItem.quantity));
}, [cartItem]);

这意味着，每当 cartItem 道具发生变化时，它都会触发更新您的状态，包括组件挂载。

useEffect()：如何重构componentDidUpdate？

useEffect(): Howto refactor componetDidUpdate?

reactjs

react-hooks