ReactJS 访问从其他组件传递过来的 JSON 对象

Posted 2023-02-22

【中文标题】ReactJS 访问从其他组件传递过来的 JSON 对象

【英文标题】：ReactJS access JSON object passed from other component

【发布时间】：2018-03-14 19:39:27

【问题描述】：

我是 ReactJs 的新手，有这个问题，现在我觉得有点难以理解。

我有一个组件调用检索 XML 对象，这个 XML 对象稍后被解析为 JSON 对象，然后传递给其他组件以便对其进行一些排序。 现在我被卡住了，无法正确访问我的第二个组件上的 JSON。

当我尝试执行 this.props.files.map - 它说地图未定义。

这是我传递属性的父组件渲染方法：

render() 
    return (
        <div>

            <List files=this.convertToJson()/>

        </div>
    )

我收到的 JSON 如下所示：

[ 
"$": 
  "date": "",
  "description": "",
  "name": "",
  "size": "107829",
  "type": "pdf"

, 
"$": 
  "date": "",
  "description": "",
  "name": "",
  "size": "682015",
  "type": "pdf"
  

]

我应该如何编写我的第二个组件来访问此 JSON 数据并稍后显示所有属性，我想对其进行迭代并访问所有属性。

this.props.files.map(function($) 
          return <li key=$>$</li>
        )

这给了我一个错误 files.map is undefined.

我对此很陌生，所以所有帮助都会很有用。

这里是 this.convertToJson() 请求的代码，如果我在控制台记录它 - 它看起来像上面的 JSON。

convertToJson = () => 
return JSON.stringify(this.state.data)

【问题讨论】：

在映射文件之前，尝试console.log并检查文件是否未定义。

你能把this.convertToJson()的代码贴出来吗？

除了@mersocarlin 尝试console.log( typeof this.props.files ) 以查看files 是否实际上是一个数组。如果不是，map 将不起作用。

您可能还需要在第二个组件中使用defaultProps 将this.props.files 默认设置为空数组。

@Chase this.convertToJson() 这样做：返回 JSON.stringify(this.state.data)

【参考方案1】：

我认为问题实际上可能出在this.convertToJson()

您需要将 JSON 对象解析为 javascript 对象，以便按照您建议的方式对其进行迭代。

看看这个例子，它似乎工作正常。

// This is just mocking your JSON object
const json = JSON.stringify([
"$": 
  "date": "",
  "description": "",
  "name": "",
  "size": "107829",
  "type": "pdf"

, 
"$": 
  "date": "",
  "description": "",
  "name": "",
  "size": "682015",
  "type": "pdf"
  

]);
// This is what you care about
const obj = JSON.parse(json);

obj.map(o => 
// You need to get o.$ to get the actual object
	console.log(o.$)
);

同样为了将组件的所有对象属性作为道具传递，您可能需要扩展运算符<li ...o.$>$</li>

希望对你有帮助

【讨论】：

当我尝试在我的代码中使用您的代码时，我收到此错误：obj.map 不是函数。我正在这样做 cont json = JSON.stringify(this.state.data) 稍后使用你的方式。如果我在此状态下控制台记录 json - 它会打印所有整个对象，如果我在解析后尝试控制台记录它，我会得到无限的 [object object]

JSON.stringify 只是在模拟 JSON，您不需要对 JSON 代码进行字符串化，只需解析它即可。如果您不需要将其设为 JSON，请尝试在 this.site.data 上使用 .map

关键是它一开始不是 JSON，而是我收到的 XML。有人告诉我将其字符串化以使其成为 JSON，然后对其进行解析，但它不起作用。