Question

在您阅读之前，我必须说，我知道这是一个常见问题。

我有一个基于isOpen道具的模态，它将决定该模态是否可见，但是我需要跟踪该模态的状态，以便在使用完后可以将其隐藏，我以某种方式使它按现在的样子工作，但是它向我显示警告Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s ...，我试图搜索是什么导致了此问题，并根据this应该予以解决，但我仍然发出警告。我是新来的本地人，我不完全了解发生了什么。如果有人可以帮助我了解问题所在以及如何解决，我将不胜感激。

export default class Update extends React.Component {
    _isMounted = false;
    constructor(props) {
        super(props);
        this.state = {
            modalOpen: false,
            name: this.props.name,
        };
    }
    componentDidUpdate(prevProps) {
        this._isMounted = true;
        if (this._isMounted) {
            if (this.props.isOpen !== prevProps.isOpen) {
                this.setState({ modalOpen: true })
            }
        }
    }
    componentWillUnmount() {
        this._isMounted = false;
    }

    update(updateObj, file) {
        const { navigate } = this.props;
        remove(file);
        addFile(updateObj);
        this.setState({ modalOpen: false });
        navigate('Main');
    }
    render() {
        const { name, modalOpen } = this.state;
        const { closeModal, file } = this.props;
        return (
            <Modal
                isOpen={modalOpen}
                closeModal={closeModal}>
                <TextInput
                    style={{ height: 60 }}
                    onChangeText={(name) => this.setState({ name })}
                    value={this.state.name}
                />
                <Button
                    title="Update File"
                    onPress={
                        () => this.update({
                            name: this.state.name,
                        }, file)
                    }
                />
            </Modal>
        );
    }
}

Answer 1

必须在组件安装之后，componentDidMount（）之后以及发生render（），componentDidUpdate（）和componentWillUnmount（）之后执行setState

Answer 2

此代码的问题之一是您实现this._isMounted的方式。

在您的情况下，无论何时组件更新，_isMounted变量都将被设置为true，因此将触发条件并且状态将被更新，因此并不能真正使您摆脱困境任何东西。

您可以尝试做类似的事情吗？

componentDidUpdate(prevProps) {
        if (this.props.isOpen) this._isMounted = true;
        if (this._isMounted) {
            if (this.props.isOpen !== prevProps.isOpen) {
                this.setState({ modalOpen: true })
            }
        }
    }

UPD（如果有人偶然发现）：

最初的问题出在更新功能的行this.setState({modalOpen: false})上，因此OP决定停止使用组件中的状态来显示Modal，而是使用父组件中的this.props.isOpen并设置{一旦触发了功能更新（从上级组件开始），就从{1}}到this.props.isOpen。警告已经消失了！

尝试更新状态时发出警告

2 个答案: