reactjs 如何仅在React属性更改时调用函数？

vmdwslir 于 2024-01-07 发布在 React

关注(0)|答案(2)|浏览(134)

我希望在每次Meteor订阅（在React with withTracker中跟踪）更改时显示一个模态对话框（例如alert()）。
我试过使用Tracker.autorun来跟踪更改，但无法确定在代码中放置它的位置。它似乎在Component构造函数中不起作用，如果放置在render()中，每次都会运行。
这是我的代码的大纲：

class Foo extends Component {
    render() {
        return (
            <h1>Example Header</h1>
            { this.maybeShowAlert() }
        );
    }
    maybeShowAlert() {
       // ONLY if bar has been updated
       alert('bar has changed');
    }
}
export default withTracker(() => {
    Meteor.subscribe('bar')
    return {
        bar: Bar.findOne({})
    };
})(Foo);

字符串

reactjs

来源：https://stackoverflow.com/questions/54585602/how-do-i-call-a-function-only-when-a-react-property-changes

2条答案

按热度按时间

u59ebvdq1#

以前没有使用过Meteor，但是如果你想做一些事情来响应状态/属性的变化，那么componentDidUpdate()就是它的生命周期方法。

componentDidUpdate(prevProps) {
    if (this.props.bar !== prevProps.bar) {
        // bar prop has changed
        alert("bar changed");
    }
}

字符串

赞(0）回复(0）举报 2024-01-07

cuxqih212#

如果你要使用Tracker.autorun，那么调用它的最佳位置是componentDidMount，因为它只在组件被挂载后调用一次。你只需要调用一次tracker函数，因为每当它所依赖的React数据源发生变化时，tracker函数都会进行响应。在tracker函数中，你将根据bar像这样，

componentDidMount() {
    Tracker.autorun(() => {
        let bar = this.props.bar;
        if (bar) {
            this.maybeShowAlert();
        }
    }
}

字符串

赞(0）回复(0）举报 2024-01-07

我来回答

reactjs 如何仅在React属性更改时调用函数？

2条答案

相关问题

热门标签

最新问答