REACT - 从 url 获取 json 数据并显示它答案

【问题标题】：REACT - fetch json data from url and display itREACT - 从 url 获取 json 数据并显示它
【发布时间】：2018-02-28 06:53:27
【问题描述】：

我是 REACT 的新手，我正在尝试学习如何从存储在 url 中的 json 样式消息中获取和显示特定参数。

例如，我试图显示的视频存储在 url 中，它是 json 消息本身的一个字段，所以它看起来像这样：

{

    "type": "video", 

    "url": "http://somewebsite.com/wantedvideo.mp4" 
}

根据我的阅读，fetch() 是获取数据的一种方式，但不幸的是，我似乎无法理解我尝试过的代码中可能缺少什么：

这是我的新手尝试：

import React, {Component} from 'react';

class App extends Component{
  constructor()
  {
    super();
    this.state={
      data: [],
    }
  }

  componentDidMount()
  {
    fetch('https://demo7443497.mockable.io/stream/video')
    .then((response) => response.json())
    .then((findresponse)=>{
      console.log(findresponse.url)
      this.setState({
        data:findresponse.url,
      })
    })
  }

  render()
  {
    return(
        <div>
          {this.state.data.url} 
        </div> 
    )
  }

}

export default App;

我的render() 对我来说总是看起来太简单了，所以对于我可能犯的任何“疯狂”错误，我深表歉意

PS：如果url字段的url中不是视频而是其他数据格式，例如图像或纯文本，那么使用相同的代码来获取它有什么缺点吗？

谢谢

【问题讨论】：

首先，看上面的代码，state中的data变量是一个数组，你试图显示this.state.data.url，这是错误的。

标签： json reactjs react-native

【解决方案1】：

this.setState({
  data: findresponse.url,
})

您将url 值设置为data 和

在render 中访问data.url。（url 上的 data 不存在）。

如果你只输入{this.state.data}，你会得到url的值。

此外，如果您从响应中获取对象，则将 state 声明为

this.state = {
  data: {}, //instead []
}

编辑：

例如根据评论使用视频控件显示视频。

<video width="400" controls>
    <source src={this.state.data} type="video/mp4" /> 
    Your browser does not support HTML5 video.
</video>

工作codesandbox

【讨论】：

确实！但是，恐怕它现在显示的是视频的 url，而不是视频本身，为了让视频运行，我应该触摸任何细节吗？
只显示网址不是显示视频的方式。请使用html5中的视频标签或其他选项
@OhWords 请检查编辑
很抱歉再次打扰您，但有两件小事让我很好奇：将数据从“[]”更改为“{}”时，出现“对象无效作为React child (found: object with keys {})。如果您要渲染一组子项，请改用数组。”考虑到这一点，我尝试保持原样，或按照您的建议将数据更改为 {}，但还在渲染中将“.toString()”添加到“this.state.data”。
这两个“解决方案”都给出了以下结果：由于某种原因，我认为 Html 无法识别变量，因为视频控件出现了，但一切都是灰色的，视频没有玩，就像它不存在一样。有没有可能我们错过了什么？

【解决方案2】：

我将提供一个简单的 App 组件，看起来像这样 -

import React, {Component} from 'react';
import { Player } from 'video-react';

class App extends Component{
    constructor() {
        super();
        this.state = {
            data: []
        }
    }

    componentDidMount() {
        fetch('https://demo7443497.mockable.io/stream/video')
            .then( resp => resp.json())
            .then((data)=> {
                this.setState({
                    data: data.url
                })
            })
    }

    render() {
        return(
            <Player
                playsInline
                src={ this.state.data }
            />
        )
    }
}

export default App;

导入css -

import "node_modules/video-react/dist/video-react.css"; // import css

@import "~video-react/styles/scss/video-react"; // or import scss

在index.html 中添加<link rel="stylesheet" href="/css/video-react.css" />

试试这个，它适用于所有浏览器。

【讨论】：