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

Question

Notes: using React for this.

Basically, I'm just trying to make a list of anchor elements from a list of links I have stored locally in a json file. I can confirm that the file is successfully seeing the "endpoints" data through console logs. However, the page just renders a white page and it doesn't look like the state is getting set correctly with the imported array. So, this is what my file looks like right now (Any help would be greatly appreciated!):

 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

You seem to be trying to render from the initial response (endpoints) rather than the map value (data). Change

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

to

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

Answer 2

Well, this was one of those classic, ask a question and then immediately figure out the answer. Basically, where I'm mapping each item, I set an argument called "data". Instead of calling "endpoints.xxx" it should be "data.xxx" for everything. Then, everything renders fine. :)