来自Ajax的ReactJS / TypeScript导出对象

Question

好的，所以我有多个ajax调用（jQuery）返回ofc，一个项目列表（每个函数的一个对象）。

我想要的是组件调用所有那些ajax获取，抛出我的项目，然后我将构建另一个具有所有结果的对象（4个结果将合并到一个具有不同道具的对象）。

我的问题是......如何调用和导出这些对象？我尝试创建一个大函数并从TSX导出它。一切都有效，有一点小虫......经过那4个ajax调用后，它不断重复，就像组件本身保持清爽一样，这让我无处可去。

任何想法如何导出ajax调用的结果，而不是看到LOOP 100次？

这是我到目前为止所尝试的 - >

let CalendarItems = createCalendarItems();
export {CalendarItems};

P.S：我对React很新，潜入相当复杂的项目，所以请耐心等待。提前致谢。

function getItems() {


  var today = new Date();
  return $.ajax({
    url: "SOMEURL"

    type: "GET",
    headers: {
      "ACCEPT": "application/json;odata=verbose"
    },
    async: false,
    success: function (data) {
      var myitems = data.d.results;
      console.log("success  ");
    },
    error: function () {
      console.log("Failed to get details ");
    }
  });
}

这个的目的（也许它有帮助）： - >

我正在向Sharepoint进行AJAX调用以检索项目（在那里，完成，调用工作）。这些调用检索我在新对象中加入的项目列表（4个列表）。

这个新对象将用作react-bootstrap-table的列表，因为 - >我将使用此对象来创建我的表。

所以我最终将创建的对象传递给 - >

  <BootstrapTable data={ calendarObjectAllItems} version='4'>

Answer 1

由于您没有提供太多代码，因此很难给出细节。但一般来说，如果你需要在组件中加载异步内容，你可以使用componentDidMount生命周期钩子来启动它。所以你的组件看起来像这样：

import { fetchCalendarItems } from 'somewhere';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
    }
  }

  componentDidMount() {
    fetchCalendarItems()
      .then(items => this.setState({ items }))
  }

  render() {
    const { items } = this.props;
    // If necessary, you can render some placeholder until the data is loaded
    //if (items.length === 0) {
    //  return <div>Loading...</div>
    //}

    return (
      <div>
        {items.map(item => <div>{item.title}</div>)}
      </div>
    )
  }
}

因此组件将挂载并呈现为空（或者在必要时呈现加载屏幕）。然后发出http请求，当请求完成时，它调用setState。这导致它再次渲染，现在使用数据。