React Js映射函数给出“不是函数”错误

问题描述 投票:-1回答:3

我正在尝试映射对象以在React JS项目中显示其值。似乎我无法使用map函数访问对象内对象的值,或者根本不显示值,或者如果我尝试使用(.split(“ / p”)),它给我一个错误,说“ split is不是功能”。

Link to codesandbox

这是我的代码:

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"
        }
      ]
    }
  }
];

我要做的是访问每个帖子的数据和文本值,并将其显示在我的项目中。任何帮助和建议,我们将不胜感激,

谢谢。

javascript arrays reactjs javascript-objects map-function
3个回答
1
投票

我想您可能想.map您的内容数组。例如:

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

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


0
投票

这是您要寻找的吗?

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}</>;
}

注意,我将data[k]numbernumberdesc任意压缩为text[k]titletext,但这不一定是您要显示的内容。

如果您的datatext数组在任何给定的study中没有相同的长度,则以上内容可能会中断。

查看here


0
投票

假设数据和文本的长度相同,以下代码可以正常工作。希望这是您要寻找的结果。还将study.map函数内部的posts重命名为study。然后映射post.data数组并获取其键值以获得对应的标题和文本的值。注意:如果数据和文本的长度不同,此方法将失败。

import React from "react";
import { studies } from "./studies";
const Data = ({ number, numberdesc, title, text }) => {
    return (
        <>
            <div>{number}</div>
            <div>{numberdesc}</div>
            <div>{title}</div>
            <div>{text}</div>
        </>
    );
};
function App() {
    const appComponent = studies.map((study, i) => {
        return (
            <>
                <div>{study.text}</div>
                {study.post.data.map((data, j) => {
                    return (
                        <Data
                            key={j}
                            number={data.number}
                            numberdesc={data.numberdesc}
                            title={study.post.text[j].title}
                            text={study.post.text[j].text}
                        />
                    )
                })}
            </>
        )
    }
    );
    return <>{appComponent}</>;
}
export default App;
© www.soinside.com 2019 - 2024. All rights reserved.