Question

我有一个看起来像这样的对象

messageData = { items: [{name:'1st msg' draft:{contact: endpoint}},
                        {name:'1st msg' draft:{contact: endpoint}},
                        {name:'1st msg' draft:{contact: endpoint}]}

我需要映射项目并执行api调用，从api端点扩展数据并将它们返回到表格行

renderMessageTableRow() {
        let dataRef = this.state.messageData.items,
            return(_.map(dataRef, (message) => {
                // Get vars from message data including contact method endpoint 
                let id = message['@id'],
                    status = message.status,
                    draftData = message.draft.recipientAddress

                   return (
                        <tr>
                            <td>{id}</td>
                            <td>{status}</td>
                        </tr>

                )
            })
        )

}

到目前为止，我的函数看起来像这样但是draftData是我需要扩展和填充表格行的端点，我正在使用React和Redux。我一直在寻找像async和co这样的库，但不知道如何在我的map函数中插入它。我只需要调用端点从该数据中生成一些变量，然后用它填充表的其余部分。任何帮助将不胜感激

Answer 1

您可以通过多种方式获取数据并将其存储以进行渲染（例如，还原）。这是一个简单的例子，它只使用组件的状态并在componentDidMount上进行ajax调用。你最有可能从组件中做这种事情，但这应该让你对某些流程有所了解。它使用同构提取，你可以在NPM上获得。

import React from 'react';

require('es6-promise').polyfill();
require('isomorphic-fetch');

const messageData = {
    items: [
        { name: '1st msg', draft: { contact: 'http://something.something/api' } },
        { name: '1st msg', draft: { contact: 'http://something.something/api' } },
        { name: '1st msg', draft: { contact: 'http://something.something/api' } },
    ],
};

class MyComponent extends React.Component {
    constructor() {
        super();

        this.state = { rows: undefined };
    }

    componentDidMount() {
        // make an array of promises that are your api calls
        const promises = messageData.items.map((item, i) => fetch(item.draft.contact).then(data => {
            messageData.items[i].draft.data = data;
            return data;
        }));

        // resolve all the api calls in parallel and populate the messageData object as they resolve
        Promise.all(promises).then(responses => {
            // messageData.items are populated now, but if you want to do anything additional, the data from the ajax calls is all here
            console.log(responses);

            // set the populated items in state
            this.setState({ rows: messageData.items });
        });
    }

    render() {
        // conditionally populate the rows constant
        const rows = (this.state.rows) ? this.state.rows.map(row => (
            <tr>
                <td>{row.draft.data.somePropFromApi}</td>
            </tr>
        )) : null;

        return (
            <table>
                {rows}
            </table>
        );
    }
}

export default MyComponent;

映射对象并进行api调用

1 个答案: