反应-从网址获取json数据并显示它

Question

我是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中，不是视频，而是其他一些数据格式，例如图像或纯文本，是否有使用相同代码查找的异议？

谢谢

Answer 1

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

您正在将url值设置为data和

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

如果仅输入{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

Answer 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" />

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