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

Question

这是我的代码

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"}]]但是在页面中我只有标记，里面什么都没有
我不知道为什么...

Answer 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>
);