Question

我做renderContacts，我试图通过调用renderContacts在带有contactResults id的div中获得结果。看起来问题是renderContacts（）函数不等待Meteor.call并立即返回undefined。但是，在Meteor.call回调中，我从后端获得了正确的数据。所以问题只是因为我不知道如何让它等到Meteor.call的回调。

class ContactsComponent extends React.Component {

    renderContacts() {

        return Meteor.call('parseClients', function(err, updatedContacts) {
            if (err) {
                console.log(err);
            } else {

                console.log(updatedContacts); // correct result in here

                if (updatedContacts.length) {
                    return contacts.map((contact, i) => (
                        <SingleContactRow key={contact._id} contact={contact}/>
                    ));
                }
            }
        });
    }

    render() {

        return (
            <div>

                <div>

                    <div id="contactResults">

                        {this.renderContacts()}

                    </div>

                </div>

            </div>
        );

    }
}

这是后端功能：

'parseClients'() {
    return Contacts.findOne({});
  }

Answer 1

如何将流星调用置于componentDidMount并使用反应状态

class ContactsComponent extends React.Component {
    constructor () {
       super()
       this.state = { contacts: [] }
    }
    componentDidMount() {
        Meteor.call('parseClients', function(err, contacts) {
            if (err)
                console.log(err);

            if (contacts.length)
                this.setState({ contacts }
        });
    }

    render() {
        const { contacts } = this.state
        return (
            <div>
               <div id="contactResults">
                {contacts.map((contact, i) => <SingleContactRow key={contact._id} contact={contact}/>)}
               </div>
            </div>
        );

    }
}

请注意，你不能返回Meteor.call的异步功能。

Meteor / React - 在渲染中返回Meteor回调

1 个答案: