如何使用 axios 在 React 16 中渲染文本数据

Question

我的最终目标是呈现 API 的文本数据，就像在 React 中一样 js.I 到目前为止所做的是集成 axios 以获得 data.My 挑战是我的数据从 URL 获取只是 text.I 无法解析或获取数据，因为 JSON.I 我能够将文本响应视为浏览器网络下的文本 tab.I 我无法在正视图。我如何在 React 中映射和呈现所有文本数据？

import React, { Component } from "react";
import { Grid, Row, Col } from "react-bootstrap";
import axios from "axios";
class About extends Component {
  constructor() {
    super();
    this.state = {
      posts: []
    };
  }

  componentDidMount() {
    axios
      .get(
        "http://cors-anywhere.herokuapp.com/http://terriblytinytales.com/test.txt"
      )
      .then(res => {
        const posts = res.data.map(obj => obj.data);
        this.setState({ posts });
      })
      .catch(error => {
        console.log((error));
      });
  }

  render() {
    return (
      <Grid>
        <Row>
          <Col xs={12} md={6}>
            <h1>fetched data</h1>
            <ul>
              {this.state.posts.map((post, id) => <li key={id}>{post}</li>)}
            </ul>
          </Col>
        </Row>
      </Grid>
    );
  }
}
export default About;

Answer 1

class About extends React.Component {
  constructor() {
    super();
    this.state = {
      posts: []
    };
  }

  componentDidMount() {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/http://terriblytinytales.com/test.txt"
      )
      .then(res => {
        //console.log("res", res)
        const posts = res.data
        //debugger
        this.setState({ posts });
      })
      .catch(error => {
        console.log((error));
      });
  }

  render() {
  //console.log(this.state.posts)
    return (
      <div>
        <div>
          <div xs={12} md={6}>
            <h1>fetched data</h1>
            <ul dangerouslySetInnerHTML={{__html: this.state.posts}}>
            </ul>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<About />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.0/react-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<div id="root"></div>

希望对您有所帮助

如何使用 axios 在 React 16 中渲染文本数据

How to render text data as it is in React 16 using axios

javascript

reactjs

axios