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的项目列表。这可能不是一个好习惯，但我现在没有时间为了让事情变得完美，我只需要完成它，所以请理解。或者也许我这么做错了，浪费了很多时间，实际上似乎就是这样，所以请指出我的意思< / p>

无论如何，按照我的策略，当我调试console.log（）的东西时，我经常得到[object Object]，我相信它应该是一个连接的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传递给我的Accordion组件时，它就像一个魅力！

但在做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} / loop map组件的Accordion / @Query内输出{{1}}

转换数据结构，在REACT，[object Object]中传递HTML？

1 个答案: