javascript - 如何从本地文件返回 React 中的 JSON 数组并让它映射到我的所有项目？

Question

注意：为此使用 React。

基本上，我只是想从我本地存储在 json 文件中的链接列表中创建一个锚元素列表。我可以通过控制台日志确认该文件已成功查看“端点”数据。但是，该页面只是呈现一个白色页面，并且看起来状态没有通过导入的数组正确设置。所以，这就是我的文件现在的样子（任何帮助将不胜感激！）：

import React from 'react';
import endpoints from './endpoints.json';

class Link extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			error: null,
			isLoaded: false,
			myData: []
		};
	}

	componentDidMount() {
		let myData = endpoints.map((data, key) => {
			console.log(endpoints);
			console.log(endpoints[0].key);
			return(
				<a className="aLink" href={endpoints.link} key={endpoints.key} >{endpoints.name}</a>
			)
		})
		this.setState({myData: myData});
		console.log(this.state.myData);
	}

	render() {
		const { error, isLoaded } = this.state;
		if (error) {
			return <div className="errorM">Error: {error.message}</div>;
		} else {
			return(
				<div>
				{this.state.myData}
				</div>
			)
		}

	}
}

export default Link;

标签： javascriptarraysjsonreactjs

Answer 1

您似乎试图从初始响应（端点）而不是地图值（数据）进行渲染。改变

href={endpoints.link} key={endpoints.key} >{endpoints.name}

至

href={data.link} key={data.key} >{data.name}