REACT - 从url获取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字段的网址中有一些其他数据格式（例如图像或纯文本）而不是视频，那么是否存在使用相同代码来填充它的不足之处？

谢谢

Answer 1

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

你将url值设置为data和

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

如果你只是把{this.state.data}，你会得到url值。

此外，如果您从响应中获取Object，则将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