Json 反应-如何显示url中包含的文本

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

我在一个url中存储了一条json消息，它本身就有一个url字段

所以它看起来像这样：

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

在该url中，有我想要显示的内容，在本例中是简单文本

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

如果它是一个图像，那就很容易了，因为我可以使用

来获取json字段url中的内容，我如何才能为文本复制相同的行为

以下是我迄今为止的代码（目前仅打印json字段url）：

import React，{Component}来自'React'；
类应用程序扩展组件{
构造函数（）
{
超级（）；
这个州={
数据：[]，
}
}
componentDidMount（）
{
取（'https://demo7443497.mockable.io/stream/text')
.then（（response）=>response.json（））
.然后（（findresponse）=>{
console.log（findresponse.url）
这是我的国家({
数据：findresponse.url，
})
})
}
render（）
{
返回(
下面应该有一些lorem ipsum文本：

{this.state.data}

)
}
}
导出默认应用程序；

此外，如果它没有要求太多，我也尝试以完全相同的方式显示视频（这个json url字段包含视频而不是文本），但出于某种原因，它只显示一个没有内容的灰色视频，就像它没有识别我传递的变量一样。我有没有遗漏任何明显的细节

下面是我用于显示视频的非常相似的代码：

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;

import React，{Component}来自'React'；
类应用程序扩展组件{
构造函数（）
{
超级（）；
这个州={
数据：[]，
}
}
componentDidMount（）
{
取（'https://demo7443497.mockable.io/stream/video')
.then（（response）=>response.json（））
.然后（（findresponse）=>{
console.log（findresponse.url）
这是我的国家({
数据：findresponse.url，
})
})
}
render（）
{
返回(
)
}
}
导出默认应用程序；
如果它是一个URL，那么重新获取它会起作用吗

  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）上打开实际URL以检查它是否是有效的mp4，Chrome应该能够轻松读取它。
文本：

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{
组成部分
}从"反应",；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
数据：“”，
}
}
组件willmount（）{
取（'https://demo7443497.mockable.io/stream/text')
.then（（response）=>response.json（））
。然后（（响应）=>{
//现在获取文本
获取（response.url）
.then（response2=>response2.text（））
.然后（响应2=>{
这是我的国家({
数据：答复2
})
})
})
}
render（）{
返回(
下面应该有一些lorem ipsum文本：

{this.state.data}

)
}
}
导出默认应用程序；

视频：

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;

import-React{
组成部分
}从"反应",；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
数据：“”
}
}
componentDidMount（）{
取（'https://demo7443497.mockable.io/stream/video')
.then（（response）=>response.json（））
.然后（（findresponse）=>{
console.log（findresponse.url）
这是我的国家({
数据：findresponse.url，
})
})
}
render（）{
返回(
{this.state.data
?
：null}
)
}
}
导出默认应用程序；

不要将状态设置为数组，然后将其转换为字符串，在开始时将其设置为空字符串。
您的视频示例不起作用，因为在第一次渲染时，视频是用空数组
this.state.data
初始化的，将其更改为字符串不会重新初始化视频，因此您需要该if语句
希望有帮助：D
您需要重新获取内部url以检索文本：

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>
    );
  }
}

import React，{Component}来自'React'；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.state={data:'}；//将数据设置为字符串而不是数组
}
componentDidMount（）{
取（'https://demo7443497.mockable.io/stream/text')
.then（response=>response.json（））
.then（findresponse=>fetch（findresponse.url，{mode:'no cors'}））//重新获取
.then（textResp=>textResp.text（））//假设这是一个文本
。然后（数据=>{
this.setState（{data}）；
});
}
render（）{
返回(
下面应该有一些lorem ipsum文本：

{this.state.data}

);
}
}


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

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

记住，无论何时从服务器检索资源对于显示一致的数据是重要的，在等待图像或视频资源时考虑旋转器等。
你需要小心你正在检索的所有内容，我想你可能会从另一个域获取。了解

测试用例：

您是否事先知道您的第二个u-u的资源类型
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>
    );
  }
}