转换数据结构，在 REACT 中传递 HTML，[对象对象]?

Question

我正在尝试转换一系列项目...

const data = [
{
title: "T1",
content: [
{
"question": "Q1a",
"answer": "A1a"
},
{
"question": "Q1b",
"answer": "A1b"
}
]
},
{
title: "T2",
content: [
{
"question": "Q2a",
"answer": "A2a"
},
{
"question": "Q2b",
"answer": "A2b"
}
]
}
]

到以下结构：

const data2 = [
{
header: "T1",
body: "<p>Q1a</p><p>A1a</p><p>Q1b</p><p>A1b</p>"
},{
header: "etc",
body: "etc"
}
]

所以我可以使用我的组件(我写了一个名为 Accordion 的组件，它接受必须采用特定格式并包含 HTML 的项目列表。这可能不是一个好的做法，但我现在真的没有时间让事情变得完美，我只需要完成它，所以请理解这一点。或者也许我做错了，浪费了很多时间，实际上似乎是这样，所以请向我指出(

无论如何，按照我的策略，当我控制台.log((时，我不断得到[对象对象]，我认为这些东西应该是HTML的串联字符串，但显然我错了。

有什么想法吗？

class App extends Component {
createMarkup(content) {
return {__html: content};
}
getQAMarkup(item) {
console.log('getQAMarkup: ', item);
return (
<div className="qa-block">
<p>
<strong>{ item.question }</strong>
</p>
<p dangerouslySetInnerHTML={ this.createMarkup(item.answer) }>
</p>
</div>
)
}
render() {
//translate data to accordionItems
const accordionItems = data.reduce((arr, item) => {
let header = item.title;
let body = item.content.reduce((str, item) => {
str += this.getQAMarkup(item);
console.log('str: ', str) // object Object?
return str;
}, '');
console.log('body: ', body); // object Object?
arr.push({
header: header,
body: body
});
return arr;
}, []);
console.log(`accordionItems: ${accordionItems[0].body}`); // object Object?

return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>React Collapse Example</h2>
</div>
<div className="App-body">
{/* <Accordion
items={ accordionItems }
openedItemKey={ 0 }
// onlyOneOpen={ true }
/> */}
</div>
</div>
);
}
}

任何帮助将不胜感激。

更新

按照炼狱的建议，我对accordionItems做了同样的事情：

const accordionItems = data.map((item) => {
return {
header: item.title,
body: item.content.map((item) => this.getQAMarkup(item))
}
});

当我把accordionItems传给我的手风琴组件时，它就像一个魅力！

但是在做console.log(accordionItems)时，我仍然[object Object].为什么？

Answer 1

如果更改此部分：

let body = item.content.reduce((str, item) => {
str += this.getQAMarkup(item);
console.log('str: ', str) // object Object?
return str;
}, '');

与其将getQAMarkup的响应视为string不如将其视为object：

let body = item.content.map((item) => this.getQAMarkup(item));
//OR
let body = item.content.map(this.getQAMarkup);

现在body将是一个元素数组，您应该能够将其输出为{body}Accordion组件中的loop/map。