json - 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字段的url中存在其他数据格式(例如图像或纯文本)而不是视频，那么使用相同的代码来获取它是否有缺点？

谢谢

Answer 1

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

您正在将 url 值设置为 data 和

在render中访问data.url。 (数据上的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