React 正在渲染 [object object] 而不是 JSX
Posted
技术标签:
【中文标题】React 正在渲染 [object object] 而不是 JSX【英文标题】:React is rendering [object object] rather than the JSX 【发布时间】:2017-11-13 12:00:54 【问题描述】:我正在尝试使用一个对象(而不是数组)在我的网站上呈现日记条目,但我遇到了一个问题,这是我当前的代码
populateJournal()
const j = Object.values(this.state.journal);
var journalEntries = '';
for (var i = 0; i < j.length; i++)
journalEntries+=
<div>
<h3>j[i].title - j[i].date</h3>
<p>j[i].entry</p>
</div>;
return(<div>journalEntries</div>);
当我调用此函数时,它会呈现"<div>[object object]</div>"
,并且 div 之间的文本是纯文本。
当我将循环更改为“journalEntries = <div....
”时,它会按预期呈现最后一个日记条目,但问题是它实际上并没有在循环中附加日记条目。
想法?
【问题讨论】:
尝试将 journalEntries+= "bla bla bla" 放入引号中,或者更好地将其移至另一个返回 JSX 语句的函数 【参考方案1】:而不是将 journalEntries
定义为字符串,而是将其定义为数组并将 JSX 元素推送到数组以进行渲染
populateJournal()
const j = Object.values(this.state.journal);
var journalEntries = [];
for (var i = 0; i < j.length; i++)
journalEntries.push(
<div>
<h3>j[i].title - j[i].date</h3>
<p>j[i].entry</p>
</div>);
return(<div>journalEntries</div>);
当您附加到字符串时,您实际上并没有附加一个字符串,而是一个不正确的对象,因此您会得到[Object Object]
您还可以使用地图来呈现您的上下文。有关如何使用地图,请参阅此答案:
REACT JS: Data Display and Array manipulation
【讨论】:
谢谢,这正是问题所在。我没有使用 map 的原因是因为我无法让它与“对象”一起使用它似乎只适用于数组......也许我只是超级菜鸟,但我错过了什么吗? 很高兴有帮助:) 是的 map 仅适用于数组,对于对象,您需要遍历 Object.keys()。我将添加一个示例解决方案的链接来回答相同的问题 看到这个答案:***.com/questions/43721168/… 谢谢,这开始变得更有意义了。也谢谢你的链接,你帮了很大的忙:)【参考方案2】:为什么你不使用.map()
,试试这个:
render()
const j = Object.values(this.state.journal);
return(
<div>
j.map((item,index) =>
<div key=index>
<h3>item.title - item.date</h3>
<p>item.entry</p>
</div>
)
</div>
);
【讨论】:
谢谢,我试过了,它奏效了。那是更简洁的代码......我以前从未使用地图来处理我的对象。这很有帮助。【参考方案3】:你不需要 popluateJournal,只需在 render() 中使用它:
render()
//const j = Object.values(this.state.journal);
const j = ['title':'one','date':'12/03/17','entry':'This is an entry',
'title':'two','date':'14/03/17','entry':'This is another entry'
];
//inject j as property into Test
const Test = (journals) => (
<div>
journals.map(journal => (
<div>
<h3>journal.title - journal.date</h3>
<p>journal.entry</p>
</div>
))
</div>
);
return (
<div><Test journals=j></Test></div>
);
【讨论】:
【参考方案4】:你已经有了状态的日志数据, 为什么要在渲染之外构造元素? 正确的做法是直接在渲染上映射。
populateJournal()
const j = Object.values(this.state.journal);
return(<div>
j && j.map((journal,i)=>
return ( <div key="journal"+i>
<h3>journal.title - journal.date</h3>
<p>journal.entry</p>
</div>
)
</div>);
记得把“key”放在每个映射的元素上。
【讨论】:
出于某种原因,我的印象是您不想在渲染中执行逻辑......谢谢,我以为我尝试了这个“地图”,但它给了我一个错误“不能使用对象,只能使用数组”我会再试一次 我认为“var j”是一个数组?因为您正在对其进行迭代?没有? 所以它实际上是一个“对象”而不是“数组”?但我认为做“Object.values”会把它变成一个数组?我真的不知道,但是...您的代码对我不起作用...以上是关于React 正在渲染 [object object] 而不是 JSX的主要内容,如果未能解决你的问题,请参考以下文章
React项目报错:Error: Objects are not valid as a React child
错误 : Object are not valid as a react child