为什么我在我的页面中看不到不同的 li 标记？答案

【问题标题】：Why don't I see the different li markups inside my page?为什么我在我的页面中看不到不同的 li 标记？
【发布时间】：2021-03-16 08:12:15
【问题描述】：

这是我的代码

export default function Search({ res }) {
    var arr = Object.entries(res)
    console.log(arr)
    return (
      <div>
        Here's the result :
        <ol>
            {arr.map((value, index) => {
                <li key={index}>{value.title}</li>
            })}
        </ol>
      </div>
    );
  }
  
  export async function getServerSideProps({ params }) {
    const { id } = params;
  
    const req = await fetch(
      `http://localhost:4000/reddit/${id}`
    );
    const res = await req.json();
  
    return {
      props: { res } // will be passed to the page component as props
    };
  }

此时：

console.log(arr)

这一行给我打印了一个包含 100 个子数组的漂亮数组，因为从 API 中获取很好......

数据看起来像这个数组：[["0", {title: "I like eating", textValue: "Yes, I do"}], ["1", {title: "I like dirinking", textValue: "Yes, I do"}]]

但在页面中我只有标记

里面什么都没有

我不知道为什么......

【问题讨论】：

请向我们展示arr 中的值是什么样的。另外，当您说“只有标记”时，您的意思是该页面正在向查看该页面的人显示实际的 HTML 标记？
数据结构是这样还是那样？ [{id:1,title:'t1'},{id:2,title:'t2'}]
只有标记，我的意思是客户端显示的页面只返回<div>Here's the result :<ol></ol></div>
数据看起来像这个数组：[["0", {title: "我喜欢吃", textValue: "Yes, I do"}], ["1", {title: "I喜欢喝酒”，textValue：“是的，我愿意”}]]

标签： javascript node.js reactjs jsx next.js

【解决方案1】：

您需要返回 map 函数，并且您应该在控制台上看到一些错误： Expected to return a value in arrow function. (array-callback-return)

return (
  <div>
    Here's the result :
    <ol>
        {arr.map((value, index) => ( //<--return items
            <li key={index}>{value.title}</li>
        ))}
    </ol>
  </div>
);

【讨论】：