Question

在我的Redux商店中，我存储了一个accountId。成功授权后，<Login>组件会存储此信息。 <Login>组件仅接收accountId（在JWT内），而不是具有其所有属性的完整Account对象。

accountId也可以通过其他组件的其他操作进行修改。

当accountId因任何原因而被修改时，我想为完整的Account文档触发一个新的GraphQL查询，并将其存储在Redux中。

为此，我创建了一个组件。我最初将Redux调度部分放在componentWillUpdate()中，但是它不起作用（它没有收到完整的GraphQL查询结果）。如果我将它放在render()中，如下所示，则可行：

import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { message } from 'antd';

// This service receives an accountId prop from Redux, and returns the complete account record
// to Redux once the graphQL query completes.

class AccountService extends React.Component {

    render() {
        if( !this.props.accountId ) {
            this.props.onAccount( null ); // Logged out -> Redux
        } else {
            if( this.props.data && this.props.data.error ) {
                console.log( this.props.data.error.message );
                message.error( this.props.data.error.message, 20 );
            }

            if( this.props.data && this.props.data.loading === false ) {
                if( this.props.data.accountById ) {
                    let account = {
                        firstName: this.props.data.accountById.firstName,
                        lastName: this.props.data.accountById.lastName,
                        // ...etc.
                    };
                    this.props.onAccount( account ); // -> Redux dispatch
                }
            }
        }

        return ( null );
    }
}

const accountQuery = gql`
query ($accountId: Int!) {accountById(id:$accountId) {
  firstName,
  lastName,
  // ...etc.
}}`;

export default graphql( accountQuery, {
    options: ( { accountId } ) => ({ variables: { accountId: accountId || 0 } }),
} )( AccountService );

上述组件按预期工作。但是当我打电话给它时它会发出警告：

Warning: setState(...): Cannot update during an existing state transition

显然，我没有以正确的方式做事。我如何构建它以便我得到结果并能够在没有警告的情况下将它们存储回Redux？

Answer 1

如果唯一的问题是警告，您可以尝试将逻辑放在componentDidUpdate中。

Answer 2

您应该使用componentWillReceiveProps获取有关接收新accountId的帐户信息。

试试这个：

class AccountService extends React.Component {

    componentDidMount() {
      // you may need this for initial rendering
      fetchAccountInfo(this.props);
    }

    componentWillReceiveProps(nextProps) {
        // do the GraphQL fetch only when account-ID is changed
        if (this.props.accountId !== nextProps.accountId) {
            fetchAccountInfo(nextProps); // fetch account info for new props
        }
    }

    fetchAccountInfo() {
        if( !this.props.accountId ) {
            this.props.onAccount( null ); // Logged out -> Redux
        } else {
            if( this.props.data && this.props.data.error ) {
                console.log( this.props.data.error.message );
                message.error( this.props.data.error.message, 20 );
            }

            if( this.props.data && this.props.data.loading === false ) {
                if( this.props.data.accountById ) {
                    let account = {
                      firstName: this.props.data.accountById.firstName,
                      lastName: this.props.data.accountById.lastName,
                      // ...etc.
                    };
                    this.props.onAccount(account); // -> Redux dispatch
                }
            }
        }
    }

    render() {
      // ...
    }
}

永远不要在setState内进行动作或render()（你很容易陷入重新渲染循环）。可能是导致警告：

Warning: setState(...): Cannot update during an existing state transition

如何构建一个从redux接收prop的组件，进行查询并将结果保存回redux？

2 个答案: