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

Question

注意:为此使用 React。

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

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;

Answer 1

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

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

到

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