如何从 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 的工作原理，但我可以帮助您了解如何在您的 react 组件中通过 json API 呈现内容。

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

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

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

在 React 中，我们使用 setState 来在发生变化时更新此状态对象状态，例如在诸如 componentDidMount 之类的生命周期方法上。当您想要将状态对象从其初始值更改为其他值时，您只需再次调用此setState。在我们的例子中，当我们从 API 接收数据时。

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

所以，在componentDidMount 中，我们可以在data 到达时做一些小改动：

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

这基本上是在说：

• 安装组件后，调用 API 获取数据
• 然后，通过该响应，从正文中获取 json
• 然后，将json“数据”分配到我们组件的状态对象中，键为content。

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

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

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

当这个状态对象更新时，react 会触发组件的新渲染。

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

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

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

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

您可以通过扩展您的状态对象来更有效地做到这一点，以查看 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;