Question

我有一个子组件，只要点击它就会触发它的父组件，这不是我们想要的。我注释掉了子组件中的所有setState（），因为我假设所有这些都会触发重新呈现父组件，但后来我发现AsyncStorage.setItem（）也触发了父组件重新呈现。有没有人知道反应原生的方法阻止孩子能够触发父母重新渲染？

这是来自子组件的代码，它显然冒泡到父组件并触发它重新呈现：

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
            });
        }
    });
}

以下是该行动的代码：

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

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

}

Answer 1

啊，似乎正在发生这种情况，因为您的父组件订阅了handleQuantityCounterValue操作更新的某些状态。如果可能，您可以从父组件mapStateToProps中删除该状态。

您还可以使用shouldComponentUpdate来确定父级是否应该重新渲染：

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

如何阻止子组件在本机中重新呈现父组件？

1 个答案: