Question

这个问题并不像听起来那么简单，但我找不到一种方法来完全覆盖它而不会让读者感到困惑

我有一个存储在url中的json消息，它本身有一个url字段。

所以它看起来像这样：

{ "type": "text", "url": "http://pastebin.com/raw/1U5vhVzH" }

在该网址中，有我要显示的内容，在本例中为简单文字

使用我的代码，我已经可以获得pastebin url，但现在我似乎无法找到显示它内容的方法。

如果它是一个图像，那将很容易，因为我可以使用<img src = {pastebinURL}来获取json字段url中的内容，我如何复制文本的相同行为？

到目前为止，这是我的代码（目前只打印json字段网址）：

import React, {Component} from 'react';

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

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

  render()
  {
    return(
        <div>

        <p> Below there should be some lorem ipsum text: </p>
        <p> {this.state.data} </p>



        </div> 
    )
  }

}

export default App;

此外，如果不是要求太多，我也试图以完全相同的方式显示视频（这个json url fiel包含视频而不是文本）但由于某种原因，它只显示带有灰色的视频没有内容，就像它没有认识到我传递的变量一样。我错过了任何明显的细节吗？

这是我用来显示视频的非常相似的代码：

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>


          <video width="400" controls>
          <source src={this.state.data} type="video/mp4" />

          </video>


        </div> 
    )
  }

}

export default App;

Answer 1

文字：

import React, { Component } from 'react'; class App extends Component { constructor() { super(); this.state = { data: '', } } componentWillMount() { fetch('https://demo7443497.mockable.io/stream/text') .then((response) => response.json()) .then((response) => { // now fetch the text fetch(response.url) .then(response2 => response2.text()) .then(response2 => { this.setState({ data: response2 }) }) }) } render() { return ( <div> <p> Below there should be some lorem ipsum text: </p> <p> {this.state.data} </p> </div> ) } } export default App;

视频

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 ? <video width="400" controls> <source src={this.state.data} type="video/mp4" /> </video> : null} </div> ) } } export default App;

不要将状态设置为数组，然后将其强制转换为字符串，在开始时将其设置为空字符串。您的视频示例无法正常工作，因为第一个渲染视频使用this.state.data进行初始化，这是一个空数组，将其更改为字符串不会重新初始化视频，因此您需要if语句希望它有所帮助：D

Answer 2

如果它是一个网址，那么重新获取它是否有效？

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

对于视频，尝试在浏览器（即Chrome）上打开实际网址以检查它是否是有效的mp4，Chrome应该能够轻松阅读。

Answer 3

您需要重新获取内部网址才能检索文本：

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();
    this.state = { data: '' }; // set data to string instead of an array
  }
  componentDidMount() {
    fetch('https://demo7443497.mockable.io/stream/text')
      .then(response => response.json())
      .then(findresponse => fetch(findresponse.url, { mode: 'no-cors' })) // re-fetch
      .then(textResp => textResp.text()) // assuming this is a text
      .then(data => {
        this.setState({ data });
      });
  }
  render() {
    return (
      <div>
        <p> Below there should be some lorem ipsum text: </p>
        <p> {this.state.data} </p>
      </div>
    );
  }
}

在其他情况下（图像，视频）应该是相似的。 ~~总是需要重新获取内部网址并决定如何根据类型处理/显示最终数据（假设您始终可以知道）~~

我刚检查了你的视频示例，这是一个更简单的场景，因为findresponse.url（初始响应）已经有了资源（图片，视频）而且没有必要重新开始-取。但是，需要将state.data初始化更改为空字符串而不是数组，以防止在第一个渲染中使用空数组初始化视频资源。这也可以用旋转器解决。

请记住，每次从服务器检索资源对于显示一致数据非常重要，请在等待图像或视频资源时考虑微调器等。

你需要小心你要检索的所有内容，我想你可能会从另一个域获取。阅读CORS。

测试用例：

REACT - 如何显示网址

3 个答案: