小编Jak*_*par的帖子
反应-按对象属性过滤
我正在尝试按属性过滤对象，但无法正常工作。
对象中的数据的结构如下：
我通过UID获取数据，然后从该对象映射所有项目，但无法使过滤器正常工作。
渲染方法如下所示：
render() {
return(
<div>
{Object.keys(this.state.dataGoal)
.filter(key => key.main == true)
.map( (key, index) => {
return <div key={key}>
<h1>{this.state.dataGoal[key].name}</h1>
<p>{this.state.dataGoal[key].main}</p>
</div>
})}
</div>有什么想法我做错了吗？
感谢您的帮助，雅库布
javascript filter firebase reactjs firebase-realtime-database
推荐指数
解决办法
查看次数
React - 如何映射嵌套对象值？
我只是想在状态对象中映射嵌套值.数据结构如下所示:
我想映射每个里程碑名称,然后映射该里程碑内的所有任务.现在我正在尝试使用嵌套的地图函数,但我不确定我是否可以这样做.
render方法如下所示:
render() {
return(
<div>
{Object.keys(this.state.dataGoal).map( key => {
return <div key={key}>>
<header className="header">
<h1>{this.state.dataGoal[key].name}</h1>
</header>
<Wave />
<main className="content">
<p>{this.state.dataGoal[key].description}</p>
{Object.keys(this.state.dataGoal[key].milestones).map( (milestone, innerIndex) => {
return <div key={milestone}>
{milestone}
<p>Index: {innerIndex}</p>
</div>
})}
</main>
</div>
})}
</div>
);
}我认为我可以通过将内部索引传递给这行代码来以某种方式实现该结果:{Object.keys(this.state.dataGoal[key].milestones)所以它看起来像:{Object.keys(this.state.dataGoal[key].milestones[innerIndex]).
但我不知道如何通过innerIndex.我也试图获得里程碑名称,{milestone.name}但这也不起作用.我猜那是因为我必须指定密钥.
有人有想法吗？或者我应该以完全不同的方式映射整个对象？
很高兴得到任何帮助,Jakub
推荐指数
解决办法
查看次数
无法将undefined或null转换为反应中的对象
我试图从初始状态对象映射对象属性.我可以获得除嵌套之外的所有属性milesotnes.
初始状态在组件类构造函数中定义,如下所示:
class GoalView extends Component {
constructor(props) {
super(props);
this.state = {
dataGoal: {},
uid: firebaseAuth().currentUser.uid,
currentGoalId: this.props.match.params.goalId,
};
}
componentDidMount = () => {
const dataGoalRef = dbRef.child('goals/'+this.state.uid+'/'+this.state.currentGoalId);
dataGoalRef.on('value', snap => {
this.setState({
dataGoal: snap.val(),
currentGoalId: this.props.match.params.goalId,
});
});
}
componentWillUnmount = () => {
this.state = {
currentGoalId: null,
};
}
...
}我currentGoalId从React Router V4链接获取:
<Link title="Open goal" to={"/app/goal/id"+key}>Open goal</Link>
这是一个更高阶的组件.当前GoalView组件的render方法如下所示:
render() {
return(
<div>
<main className="content">
<p>{this.state.dataGoal.description}</p><br /><br />
{Object.keys(this.state.dataGoal.milestones).map( (milestoneKey) …推荐指数
解决办法
查看次数