我如何从 url 获取 json 并在我的 js 页面上显示 json 内容

Question

我正在制作一个自定义 MS Teams 应用程序，并在该应用程序中尝试从 url 中获取 json 以便稍后显示内容。但是，提取失败。我的目标是从提供的 url 中获取数据列表，然后将其显示在我的团队应用程序中的选项卡中，即此处：Where i want my json content to show up

您可能会说，我完全没有使用 javascript 的经验，但是自定义 MS 团队应用程序需要 javascript...

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

import React from 'react';
import './App.css';
import * as microsoftTeams from "@microsoft/teams-js";

/**
 * The 'GroupTab' component renders the main tab content
 * of your app.
 */

class Tab extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      context: {}
    }
  }

  //React lifecycle method that gets called once a component has finished mounting
  //Learn more: https://reactjs.org/docs/react-component.html#componentdidmount
  componentDidMount(){
    // Get the user context from Teams and set it in the state
    microsoftTeams.getContext((context, error) => {
      this.setState({
        context: context
      });
    });
    // Next steps: Error handling using the error object
  }

  componentDidMount() {
    fetch('http://example.com/movies.json')
      .then(response => response.json())
      .then(data => console.log(data));

  }

  render() {
      var jsondata = data; 
      let userName = Object.keys(this.state.context).length > 0 ? this.state.context['upn'] : "";

      return (
        <div>

        </div>
      );
  }
}
export default Tab;

总而言之，我如何从 url 中获取我的 json 并在我的 tab.js 页面上显示 json 的内容？

在此先感谢您的帮助。

Answer 1

虽然我无法说明 Teams API 是如何工作的，但我可以帮助您了解如何从 json API 在您的 React 组件中渲染内容。

在您的 componentDidMount 函数中，您的示例正在发送和接收来自 API 的响应。要呈现此响应，我们需要将 data 分配给组件的“状态”，然后使用它在 HTML.

中呈现它

这将非常简单。首先，您需要以与 context 类似的方式扩展组件的状态。首先在构造函数中执行此操作，我们将在其中声明一个空 object 的初始状态（我将其命名为 content 但您可以使用最有意义的任何名称）：

// inside the constructor() function
this.state = {
  context: {},
  content: {}
}

在 React 中，我们使用 setState 来更新此状态 object 状态，当某些事情发生变化时，例如生命周期方法 componentDidMount。当您想将状态 object 从其初始值更改为其他值时，只需再次调用此 setState 即可。在我们的例子中，当我们从 API.

接收到数据时

setState 获取您提供的任何内容，然后 将其合并 到状态 object 中，因此您只需声明您想要更改的任何内容。其他未声明的内容将保持不变。

因此，在 componentDidMount 中，我们可以做一些小改动，以便在它到达时对 data 做一些事情：

 componentDidMount() {
    fetch('http://example.com/movies.json')
      .then(response => response.json())
      .then(data => {
        this.setState({
          content: data 
        })
      });
  }

这基本上是在说：

安装组件后，调用从 API
然后，根据该响应，从 body
然后，在 content.

然后您可以通过调用 this.state.content 来处理这些数据。我不确定数据将采用什么格式，但是 json object 从 API 返回的任何内容都将存储在 this.state.content.

下

举个例子，假设我们从 API 中得到一个简单的 object，看起来像这样 { title: "Tab title" }。这意味着，在成功调用 API 后，我们的状态 object 将如下所示：

{
  context: "whatever you have here", // whatever you have here, I don't know this
  content: { title: "Tab title" }
}

当此状态 object 更新时，React 将触发组件的新渲染。

所以，为了让它出现在我们的组件中，我们需要在我们的 render 函数中使用这个状态（如果它们需要动态呈现而不是硬编码，我们将它们包裹在花括号中）：

render() {
  return (
      //... the rest of your function
      <div>{this.state.content.title}</div>
  );
}

您可能已经猜到了，如果标题存在，这将在 div 中显示标题。

最终，您应该考虑在 API 调用自行解决之前处理组件的状态。生命周期方法 componentDidMount 将在组件安装后调用，因为你正在点击 API，所以会有 something 渲染到 DOM 在 API 调用自行解决之前。在我的示例中，它将只是一个空的 div，然后当状态更新并再次调用渲染函数时它会出现。

您可以通过扩展您的状态 object 来查看 API 响应是否完成（您可以在设置内容的同一位置更新它）来更有效地做到这一点，并且您可以在此基础上有条件地渲染 UI。

关于生命周期方法的 official docs 将帮助您更多地理解这种模式。

祝你好运！

Answer 2

好吧，你可以依靠@Josh Vince 的解释，因为他做得很完美，我会为你编写更简洁的代码。

让我们创建 2 个方法，用各自的数据设置状态，然后简单地调用状态值并根据您的意愿呈现以下内容。

import React, {Component} from 'react';
import './App.css';
import * as microsoftTeams from "@microsoft/teams-js";

class Tab extends Component {
    this.state = {
      context: {},
      movies: null
    }

     getContext = () => {
      try {
         microsoftTeams.getContext((context) => this.setState({context}));
       }
      catch(error){
        console.log('ERROR ->', error);
        throw error;
      }
     }

      fetchMoviesData = () => {
        try {
           fetch('http://example.com/movies.json')
           .then(response => response.json())
           .then(data => this.setState({movies: data}));
        } catch(error){
           console.log('ERROR ->', error);
           throw error;
        }
      }

  componentDidMount() {
     this.getContext();
     this.fetchMoviesData();
  }

  render() {
      let {movies, context} = this.state;
      const jsondata = movies; 
      let userName = Object.keys(this.state.context).length ? context['upn'] : "";
      return <>JSONDATA: {jsondata}, USERNAME: {userName}</>
  }
}
export default Tab;

我如何从 url 获取 json 并在我的 js 页面上显示 json 内容

How do i fetch json from a url and display json content on my js page

javascript

fetch

reactjs

microsoft-teams