为什么我在我的页面中看不到不同的 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 function，您还应该在控制台上看到一些错误： Expected to return a value in arrow function. (array-callback-return) 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>
);