Question

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

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

当我试图这样做时，.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未定义。

我对此很新，所以所有的帮助都会有用。

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

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

Answer 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>

希望这有帮助

ReactJS访问从其他组件

1 个答案: