道具更改后再次响应调用API？

Question

我有一个项目使用以下代码调用componentDidMount（）上的API服务

class Posts extends Component {

    componentDidMount() {
        apiService.get(this.props.filters);
    }
}

const mapStateToProps = state => {
    return {
        filters: state.filters
    }
}

我的组件将过滤器从redux存储区传递到API调用。

但是，如果过滤器通过另一个组件发生变化怎么办？我似乎找不到正确的生命周期方法来在发生这种情况时重新调用api。

Answer 1

让它工作使用

componentDidUpdate(prevProps) {
    if(JSON.stringify(prevProps.filters) !== JSON.stringify(this.props.filters)) {
        // make API call
    }
}

使用JSON。stringify确保两个空数组不会被视为不同。

Answer 2

如果你想在本地解决这个问题，你应该使用组件didUpdate方法。

componentDidUpdate(oldProps, newProps) {
    if (this.notEqual(oldProps.filter, newProps.filter)) {
        apiService.get(this.props.filters);
    }
}

但是我会考虑将数据提升到ReDux，并发送一个异步动作来更新过滤器更改事件处理程序中的API数据。