反应

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

getProfile细节功能：

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

在这里，函数"getProfile细节"正在进行api调用，然后调度一个redux存储操作，该操作正在设置配置文件细节。

问题是，每次调用getProfile细节时，redux存储都会更新，组件会重新渲染，这反过来会触发组件didMount，并进入无休止的循环。

请建议如何构造这个。

Answer 1

您应该使用mapDispatchToProps而不是MapStateTops。后者仅使用现有状态更新组件。

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

请从中提供代码/存储/actions/profileAction文件。

Answer 2

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

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

您需要在componentDidMount中以不同的方式初始化数据，类似于从状态获取数据。然后，仅当用户更改时才重新获取详细信息。