如何从json数据动态呈现reactjs组件
我有一些json数据。3个不同的对象。我想从这些对象中提取数据并将其显示在屏幕上。基本上每个对象都有一个名称、摘要和图标。因此，我想通过所有这3个对象，并在屏幕上显示每个图标，名称和摘要。这些对象是特色应用程序。它们显示在网格中。每个应用程序都有自己的徽章。徽章在AppBadgeHomePage.js文件中。
现在什么都没有渲染。我得到了h3标签，仅此而已。“特色”有一个div类，但下面什么也没有。看起来this.state.feat.map坏了。或者不工作。或者也许是这样的，只是没有任何东西传递给应用程序徽章。我将另一个文件中的特色应用程序网格调用得很好。我只是想知道这是不是我太累了，盯着这个看了太久的案例之一。
json数据如下所示。图标和摘要位于customData对象中。
{
name: appName,
customData: {
icon: iconURL,
summary: summary
}
}Marketplace.js
import AppBadgeHomePage from './AppBadgeHomePage';
import React, { Component } from 'react';
export default class FeaturedGrid extends React.Component {
constructor(props){
super(props);
this.getFeaturedApps = this.getFeaturedApps.bind(this);
let name, summary, icon;
}
state = {
feat: []
}
getFeaturedApps = () => {
fetch(`http://localhost:3001/apps/featured`)
.then(response => response.json())
.then(responseJson => {
this.setState({
feat: responseJson.map(item => ({
name: item.name,
icon: item.customData.icon,
summary: item.customData.summary
}))
})
})
}
render(){
return (
<div>
<h3>Featured Apps</h3>
<div className="featured">
{this.state.feat.map(featured => (
<AppBadgeHomePage
name={featured.name}
icon={featured.customData.icon}
summary={featured.customData.summary}
/>
))}
</div>
</div>
)
}
}AppBadgeHomePage.js
import React, { Component } from 'react';
export default class AppBadgeHomePage extends React.Component {
render(){
return (
<a className="featured-grid-item-badge" href="www.google.com">
<div className="featured-grid-item">
<img className="featured-appIcon" src={this.props.icon} />
<div>
<p className="featuredTitle">{this.props.name}</p>
</div>
<div>
<p className="badgeSummary">{this.props.summary}</p>
</div>
</div>
</a>
)
}
}回答 3
Stack Overflow用户
发布于 2020-11-24 15:19:18
为什么要映射feat，feat应该是一个数组
试试这个:-
getFeaturedApps = () => {
fetch(`http://localhost:3001/apps/featured`)
.then(response => response.json())
.then(responseJson => {
this.setState({
feat: responseJson
}))
})
})
}Stack Overflow用户
发布于 2020-11-24 15:31:23
首先，您需要在console.log方法下使用render (this.state.feed)来查看提要数组是否总是空的。
如果为空，我建议您调用componentDidMount()方法中的API。
如果它不是空的，那么你会注意到提要状态有一个对象，你已经将它设置为你想要的键值对，所以不需要这样做：
<AppBadgeHomePage
name={featured.name}
icon={featured.customData.icon}
summary={featured.customData.summary}
/>而是这样做：
<AppBadgeHomePage
name={featured.name}
icon={featured.icon}
summary={featured.summary}
/>总而言之，如果没有渲染子组件，那么数组必须一直为空。如果子组件正在被呈现，并且值没有出现，那么被调用的键就是错误的。
Stack Overflow用户
发布于 2020-11-24 16:43:09
从react文档中：
避免在构造函数中引入任何副作用或订阅。对于这些用例，请改用
componentDidMount()。
- 数据获取应该从
componentDidMount生命周期方法中分派。 - 不要在类body.
getFeaturedApps中混合使用constructor和初始化状态是一个箭头函数，所以不需要在promise链中将this绑定到它应该检查promise链中的成功fetch。您还应该处理已返回的promise链中的promise rejections和其他抛出的错误。- 在映射
this.state.feat时，您错误地尝试访问原始嵌套值，但在fetch响应处理中映射了feature元素时，将其展平。
代码：
class FeaturedGrid extends React.Component {
state = {
feat: []
};
componentDidMount() {
this.getFeaturedApps();
}
getFeaturedApps = () => {
fetch(`http://localhost:3001/apps/featured`)
.then((response) => {
if (!response.ok) {
throw new Error('Response not ok');
}
return response.json();
})
.then((responseJson) => {
this.setState({
feat: responseJson.map((item) => ({
name: item.name,
icon: item.customData.icon,
summary: item.customData.summary
}))
});
})
.catch(console.error);
};
render() {
return (
<div>
<h3>Featured Apps</h3>
<div className="featured">
{this.state.feat.map((featured) => (
<AppBadgeHomePage
name={featured.name}
icon={featured.icon}
summary={featured.summary}
/>
))}
</div>
</div>
);
}
}https://stackoverflow.com/questions/64981607
复制相似问题
腾讯云开发者
