javascript - TypeError:无法读取未定义的属性“地图” - 如何访问本地 json API 中的数组
问题描述
我能够使用 fetch 在本地导入一个 api JSON,如果你想查看它,这个url 中提供了 api。
问题如下,在传递状态 searchString 时出现以下错误:
'TypeError:无法读取属性'映射'未定义'
我相信这是因为我正在导入完整的 json 对象,而我只需要访问关键结果。
File App.js
class App extends Component {
constructor(props) {
super(props);
this.state = {
searchString: []
};
}
componentDidMount() {
fetch('./recipes.json')
.then(response => response.json())
.then(json => console.log(json ))
.then(json => this.setState({ searchString: json }));
}
render() {
return (
<div className="App">
<Navbar />
<div className="container mt-10">
<div className="row">
<RecipeItem list={this.state.searchString}/>
</div>
</div>
</div>
);
}
}
File RecipeItem.js
const RecipeList = ({ searchString }) => {
<div>
<img className="card-img-top img-fluid" src={searchString.href} alt={searchString.title} />
<div className="card-body">
<h5 className="card-title">{searchString.title}</h5>
<p className="card-text">
<strong>Ingredients: </strong>{searchString.ingredients}
</p>
</div>
</div>
}
const RecipeItem = (props) => {
return (
<div className="col-sm-3 mt-4">
<div className="card">
{props.list.map((searchString, index) =>
<RecipeList searchString = {searchString} key={index} />
)}
</div>
</div>
)
}
解决方案
RecipeItem
组件在最初安装时没有数据,因为您正在进行 fetch 调用。所以这就是你收到错误的原因。
如果有数据,您可以添加一个简单的检查,然后执行 map/filter/ 或其他任何操作:
{props.list && props.list.map((searchString, index) =>
<RecipeList searchString = {searchString} key={index} />
)}
推荐阅读
- uwp - 在 4K 显示器上运行的 UWP 应用程序因 E_RUNTIME_SETVALUE 错误而崩溃
- django - Django Rest 框架 - 过滤 URL - get() 得到一个意外的关键字参数“用户名”
- html - 对 Bootstrap css 网格、flex 和行布局感到困惑
- javascript - 如何从类(父)中获取 ID(子)的名称列表
- javascript - 清除日期选择器字段
- regex - PCRE - 当且仅当更远的地方适合时匹配每个
- visual-studio - VS2019 上的 LogicApps 说“无法识别术语 'Get-AzureRmResourceGroup'”
- php - Can't catch Ldap_add exception
- delphi - loadfromfile 上的 TStringlist 错误:目标多字节代码页中不存在 Unicode 字符的映射
- html - 如何使用 CSS 将文本颜色作为背景图像?