React Js map function 给出“不是函数”错误

Question

我正在尝试通过对象 map 在我的 React JS 项目中显示它们的值。 看起来我无法使用 map function 访问对象内对象的值，根本不显示值，或者如果我尝试使用 (.split("/p")) 它给我一个错误，说“split is不是函数”。

链接到代码框

这是我的代码：

import React from "react";
import { studies } from "./studies";

import "./styles.css";

const Data = ({ title, text, number, numberdesc }) => {
  return (
    <>
      <div style={{ margin: "1rem" }}>{title}</div>
      <div style={{ margin: "1rem" }}>{text}</div>
      <div>{number}</div>
      <div>{numberdesc}</div>
    </>
  );
};

function App() {
  const appComponent = studies.map((post, i) => {
    console.log(studies);
    return (
      <Data
        key={i}
        number={studies[i].post.number}
        title={studies[i].post.title}
        text={studies[i].post.text
          .split("/p")
          .reduce((total, line) => [total, <br />, <br />, line])}
      />
    );
  });
  return <>{appComponent}</>;
}

export default App;

和{studies}文件：

export const studies = [
  {
    id: "first",
    text: "1st Post",
    post: {
      data: [
        { number: "100", numberdesc: "description1" },
        { number: "200", numberdesc: "description2" },
        { number: "300", numberdesc: "description3" }
      ],

      text: [
        {
          title: "Title1 from the 1st post",
          text: "Text1 from the 1st post."
        },
        {
          title: "Title2 from the 1st post",
          text: "Text2 from the 1st post."
        },
        {
          title: "Title3 from the 1st post",
          text: "Text3 from the 1st post"
        }
      ]
    }
  },
  {
    id: "second",
    text: "2nd Post",
    post: {
      data: [
        { number: "100", numberdesc: "description1" },
        { number: "200", numberdesc: "description2" },
        { number: "300", numberdesc: "description3" }
      ],

      text: [
        {
          title: "Title1 from the 2nd post",
          text: "Text1 from the 2nd post "
        },
        {
          title: "Title2 from the 2nd post",
          text: "Text2 /p from the 2nd post"
        },
        {
          title: "Title3 from the 2nd post",
          text: "Text3 from the 2nd post"
        }
      ]
    }
  }
];

我想要做的是访问每个帖子的数据和文本值，并将它们显示在我的项目中。 非常感谢任何帮助和建议，

谢谢你。

Answer 1

我认为您可能想要.map您的内容数组。 例如：

text={studies[i].post.text.map(t => <p><strong>{t.title}</strong>: {t.text}</p>)}

可能会替换正在中断的现有行。

Answer 2

这是你要找的吗？

function App() {
  const appComponent = studies.map(study =>
    study.post.data.map((data, k) => (
      <Data
        key={k}
        number={data.number}
        numberdesc={data.numberdesc}
        title={study.post.text[k].title}
        text={study.post.text[k].text}
      />
    ))
  );
  return <>{appComponent}</>;
}

请注意，我使用text[k]的title和text任意压缩data[k]的number和numberdesc ，但这可能不一定是您想要显示的内容。

如果您的data和text arrays 在任何给定study中的长度不同，上述内容可能会中断。

看这里。