如何在React Native中阻止子组件重新呈现父组件？

Question

I have a child component that is triggering it's parent component whenever it's clicked, which is not something that we want. I commented out all of the setState()s within the child component because I assumed that was all that would be triggering the re-render of the parent component but then I discovered AsyncStorage.setItem() is also triggering the parent to re-render. Does anyone know of a way in react native to stop the child from being able to trigger the parent to re-render?

Here is the code from the child component which is apparently bubbling up to the parent component and triggering it to re-render:

minusOne = () => {
    this.setState({
        total: this.state.total - 1
    });
    this.setState({ total: this.state.total - 1 }, () => {
        this.props.dispatch(handleQuantityCounterValue(this.props.data.productId, this.state.total));
    });
}

componentDidMount() {
    AsyncStorage.getItem(this.props.data.productId.toString()).then((resultCount) => {

        if (resultCount !== null) {
            this.setState({
                total: parseInt(resultCount)
            });
        } else  {
            this.setState({
                total: 0
            });
        }
    });
}

Here is the code from the action:

export function handleQuantityCounterValue(productId, count) {
    return (dispatch, getState) => {
        dispatch({
                type: types.HANDLE_QUANTITY_COUNTER
            }
        );

        AsyncStorage.setItem(productId.toString(), count.toString());
    };

}

Answer 1

Ah, seems like it's happening because your parent component is subscribed to some piece of state that the handleQuantityCounterValue action updates. If possible, you can remove that piece of state from your parent components mapStateToProps .

You can also use shouldComponentUpdate to determine if the parent should re-render or not:

shouldComponentUpdate(nextProps, nextState) {
    return nextProps.field1 !== this.props.field1
}