映射对象并执行api调用

Map objects and do an api call

本文关键字：api 调用 执行 对象 映射      更新时间：2023-09-26

我有一个像这样的对象

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的库，但不确定我将如何在我的地图功能中插入这个。我只需要调用端点，从该数据生成一些变量，并用它填充表的其余部分。如有任何帮助，不胜感激

有许多方法可以获取数据并将其存储以供呈现(例如redux)。下面是一个简单的示例，它只使用组件的状态，并对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;
相关文章：