循环遍历函数中数组中的对象，然后输出值

Question

我试图在react应用程序中的配置文件中循环对象数组，并在页面上打印出"标题"，"问题"one_answers"修复"的值。我试图在loopMessages函数中循环数组中的每个对象。但是没有任何方法可以让这些值显示在页面上。有办法让我的价值观出现吗?

CONFIG:
`const messages = [
{
headline: "some headline",
problem: "some text here for description.",
fix: "some solution"
},
{
headline: "some headline",
problem: "some text here for description.",
fix: "some solution"
},
{
headline: "some headline",
problem: "some text here for description.",
fix: "some solution"
},
{
headline: "some headline",
problem: "some text here for description.",
fix: "some solution"
},
{
headline: "some headline",
problem: "some text here for description.",
fix: "some solution"
},
{
headline: "some headline",
problem: "some text here for description.",
fix: "some solution"
}
]
export default messages;`

import styles from "./styles.css";
import messages from "../../config/messages.js";
const loopMessages = () => {
Object.values(messages).forEach((value) => {
return  <p>value.headline<p>
<p>value.problem<p>
<p>value.fix<p>
});
});

};
const Guidlines = () => {
return (
<>
<div className="sub-heading-container">
<h3 className="sub-heading">Messages</h3>
</div>
<div className="guide-container">
<div className="square">
{loopMessages()}
</div>
</div>
</>
);
};
export default Guidlines;

我尝试使用对象。但是我的页面仍然是空白的，并且没有打印出每个对象。

const loopMessages = () => {
Object.values(messages).forEach((value) => {
return  <p>value.headline<p>
<p>value.problem<p>
<p>value.fix<p>
});
});

Answer 1

loopMessages()没有返回任何值，尝试使用map返回

const loopMessages = () => {
return Object.values(messages).map((value) => {
return (
<>
<p>{value.headline}</p>
<p>{value.problem}</p>
<p>{value.fix}</p>
</>
);
});
};

Answer 2

你可以这样写:

messages?.forEach(message => {
return  
<>
<p>{message.headline}<p>
<p>{message.problem}<p>
<p>{message.fix}<p>
</>
})

这里messages是一个数组，forEach循环遍历每个消息元素(对象)和消息。Keyname应该给出值

你应该把所有的

标签下的标签，然后返回

Answer 3

你的loopMessage()没有返回任何东西，这就是为什么它不工作。试着让你的loopMessage()像这样。用map方法。下列代码

const loopMessage=()=>{
const result = messages.map((item)=>{
return(<div>
<p>{item.headline}</p>
<p>{item.problem}</p>
<p>{item.fix}</p>
</div>
)
})
return result;