Question

我想在我的组件加载时进行api调用。我有以下代码：

import React, { Component } from "react";
import { connect } from "react-redux";
import { getProfileDetails } from "../store/actions/profileAction";

class ProfilePage extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.getProfileDetails(this.props.currentUser.user, "");

        console.log("COMPONENTDIDMOUNT");
    }

    render() {
        var { currentUser, getProfileDetails, profile } = this.props;
        return (
            <React.Fragment>
                <h1>Profile Page for {currentUser.user.username} !!</h1>

            </React.Fragment>
        )
    }

}

function mapStateToProps(state) {
    return ({
        currentUser: state.currentUser,
        profile: state.profile
    })
}

export default connect(mapStateToProps, { getProfileDetails })(ProfilePage);

getProfileDetails fucntion：

export function getProfileDetails(user, detail) {
    return dispatch => {
        return apiCall("get", `/api/users/profile/${user.id}/${detail}`)
            .then(profileDetail => {
                dispatch(setCurrentProfile(profileDetail, detail));
                dispatch(removeError());
            })
            .catch(err => {
                dispatch(addError(err.message));
            })
    }
}

此处函数“ getProfileDetails ”正在进行api调用，然后调度正在设置配置文件详细信息的redux存储操作。

问题在于每次调用getProfileDetails时，都会更新redux存储并重新呈现组件，这反过来会触发componentDidMount，会进入无限循环。

请建议如何构建它。

Answer 1

如果更改，您想要捕获的状态属性是什么？例如，如果您只想在currentUser更改时调用新的提取，则可以执行以下操作：

componentDidUpdate(prevProps) {
  if (prevProps.currentUser !== this.props.currentUser)
    this.props.getProfileDetails(this.props.currentUser.user, "");
}

您需要在componentDidMount中以不同方式初始化数据，例如从州获取数据。然后，只有在用户更改时才重新获取详细信息。

Answer 2

您应该使用mapDispatchToProps代替mapStateToProps。后者仅使用现有状态更新组件。

看起来您提到的问题在react-redux文档中进行了讨论 - https://redux.js.org/faq/react-redux#react-rendering-too-often。这可能会帮助您调试。

请提供../store/actions/profileAction文件中的代码。

反应与反应redux - 由于在componentDidMount中放置了api调用，组件会重复呈现

2 个答案: