我正在尝试映射对象以在React JS项目中显示其值。似乎我无法使用map函数访问对象内对象的值,或者根本不显示值,或者如果我尝试使用(.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"
}
]
}
}
];
我要做的是访问每个帖子的数据和文本值,并将其显示在我的项目中。任何帮助和建议,我们将不胜感激,
谢谢。
我想您可能想.map
您的内容数组。例如:
text={studies[i].post.text.map(t => <p><strong>{t.title}</strong>: {t.text}</p>)}
可能替换正在中断的现有行。
这是您要寻找的吗?
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]
的number
和numberdesc
任意压缩为text[k]
的title
和text
,但这不一定是您要显示的内容。
如果您的data
和text
数组在任何给定的study
中没有相同的长度,则以上内容可能会中断。
查看here。
假设数据和文本的长度相同,以下代码可以正常工作。希望这是您要寻找的结果。还将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;