将字符串转换为 JSON 或 Javascript/React 中的其他数据结构

Question

数据来自父组件的道具：

  render() {
    return (
      <div className='App'>
        <header className='App-header'>
          <Table data={this.state.apiResponse} />
        </header>
      </div>
    );
  }

和表格组件如下。 如果像这样发送的数据被发送到整体渲染，它会显示在屏幕上。 这就是this.props.data样子。

class Table extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { data } = this.props;
      <div>
        <table>
          <thead>
            <tr>{data}</tr>
          </thead>
        </table>
      </div>
    );
  }
}

export default Table;

当我想修改该数据时出现问题。 例如，如果在render()中添加：

console.log(typeof data) -> 返回string

所以我尝试将其转换为 JSON：

const convertedData = JSON.parse(data); -> 返回错误信息：

错误：引发了跨域错误。 React 无法访问开发中的实际错误 object。

this.props.data的格式有问题吗？ 如何将其从字符串转换为其他数据结构？ （因为我需要执行map并reduce它）。

Answer 1

首先，您的 Table 组件需要一个 return 语句。 但是，关于原始问题，我怀疑您的 api 返回的内容与您的预期响应不同。 我使用您的预期数据创建了一个.json 文件，在应用程序中导入数据，并在应用程序内呈现表格。

当您在 Table 组件中控制台日志数据时，结果是什么。

应用程序.js

import React from 'react';
import './App.css';
import apiData from './api'
import Table from "./Table";

function App() {
     return (
        <div className="App">
             <header className="App-header">
                   <Table data={apiData} />
             </header>
        </div>
     );
}
export default App;

表.js

import React, {PureComponent} from "react";

export default class Table extends PureComponent{

    render() {
        const { data } = this.props;
        return(
            <div>
                <table>
                    <thead>
                         <tr>{data[0].game_id} {typeof data}</tr>
                    </thead>
                </table>
            </div>
        );
    }
}