Question

我是REACT的新手，我正在尝试学习如何从存储在网址中的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的{{1}}中的

。（data.url url不存在）。

如果您只是放data，则会获得{this.state.data}值。

此外，如果您从响应中获取Object，则将url声明为

state

编辑：

e.g。根据评论使用视频控制显示视频。

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

工作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

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

尝试此操作，它将对所有浏览器都有效。

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

2 个答案: