如何從本地文件返回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; 

Answer 1

您似乎正在嘗試從初始響應（端點）而不是地圖值（數據）進行渲染。 更改

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

至

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

Answer 2

好吧，這是經典之作之一，問一個問題，然后立即找出答案。 基本上，我在映射每個項目的地方都設置了一個稱為“數據”的參數。 而不是調用“ endpoints.xxx”，所有內容都應為“ data.xxx”。 然后，一切呈現正常。 :)