为啥我在我的页面中看不到不同的 li 标记？

Posted 2023-02-22

【中文标题】为啥我在我的页面中看不到不同的 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：“是的，我愿意”]]

【参考方案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>
);