javascript - 从 JSON 数组中删除括号 React

Question

我正在尝试从浏览器中的输出数组中删除 } { 括号，以使其在我的页面上看起来更干净，但我不确定如何执行此操作。我的数组已经正确输出，在每个对象的新行上这是正确的，但我想删除括号。

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

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>
              <Image
              style={{width: 200, height: 50, margin: 'auto'}}
              source={require('./img/XXX.png')}
              />
            </header>
            <div className='renderhere'>
              <pre>{JSON.stringify(this.state.result, null, 2).replace(/]|[[]/g, '')}</pre>
            </div>
            <footer>Last Application Deployment v1.0. By XXX.</footer>
          </div>

        );
  }
    }

export default App;

当前的输出如下所示:

  {
    "appName": "App 1",
    "latestDeploymentDate": 0
  },
  {
    "appName": "App 2",
    "latestDeploymentDate": 1
  },
  {
    "appName": "App 3",
    "latestDeploymentDate": 2
  },
  {
    "App 4",
    "latestDeploymentDate": 3
  },
  {
    "appName": "App 5",
    "latestDeploymentDate": 4
  }

但是我希望输出如下所示:

    "appName": "App 1",
    "latestDeploymentDate": 0

    "appName": "App 2",
    "latestDeploymentDate": 1

    "appName": "App 3",
    "latestDeploymentDate": 2

    "appName": "App 4",
    "latestDeploymentDate": 3

    "appName": "App 5",
    "latestDeploymentDate": 4

如果可能的话，我也想删除语音标记，但现在只删除括号就可以了。

Answer 1

你可能不应该这样做。原因:

1. 这是不自然的方式

2. 字符串操作(字符串化为 json 并用正则表达式替换)的成本很高。

相反，您可以映射您的数组:

<pre>
  {this.state.result.map(item => {
    return (
      <span>"appName": "{item.appName}"</span>
      <span>"latestDeploymentDate": "{item.latestDeploymentDate}"</span>
    )
  })
</pre>

从 HTML 规范的 Angular 来看，这不是那么有效，并且可能会破坏您的样式，但我决定将其留在这里，以防您认为它有用。