Question

我已经设法从API输出JSON，但是它是在一个大块中输出的，但我希望每次关闭时都会在新行上显示每一条json＆＃39;}＆＃39 ;

import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';

class App extends Component {

  state = {result : null}

  componentDidMount = () => {

    $.ajax({
      type: "GET",
      url: 'http://localhost:3001/data',
      data: {},
      xhrFields: {
        withCredentials: false
      },
      crossDomain: true,
      dataType: 'JSON',
      success: (result) => {
        this.setState({result : result});
      }
    });

  };

  render() {
    return (
          <div className="App">
            <header>
              <h2>Last Application Deployment </h2>
            </header>
            <div id='renderhere'>
              {JSON.stringify(this.state.result)}
            </div>
          </div>
        );
  }
    }

export default App;

Answer 1

尝试用这种CSS样式包装文本。您的问题将得到解决。不需要复杂的功能。

 <p style={{whiteSpace: 'pre-line'}}>my json text goes here \n\n</p>

Answer 2

第一个选项：如果要输出JSON以进行调试，则应尝试react-json-pretty

第二种选择：如果你想做什么应该用于制作，请做以下事情：

<div id='renderhere'>
  <pre>{JSON.stringify(this.state.result, null, 2)}</pre>
</div>

在新行上反应输出JSON

2 个答案: