NextJS中使用getInitialProps获取数据后页面无法渲染但console.log能正常输出数据的问题

嘿，我一眼就瞅到你代码里的问题了——在map的回调函数里，你多套了一层额外的花括号{}，这直接导致你的JSX没被正确返回，页面自然就看不到内容了！

咱们拆解下原因：当你写{this.props.siswa.map(siswa => { ... })}时，回调里的{}是用来包裹代码块的，但如果代码块里没有显式的return语句，这个函数就不会返回任何东西。你里面的console.log(siswa)能正常执行，是因为它在代码块里被运行了，但后面的JSX片段根本没被返回出去，React自然没法渲染它。

修复方案 #

给你两种简单的修复方式，选哪种都行：

方法1：用箭头函数隐式返回（更简洁推荐）

把回调里的外层花括号改成圆括号，箭头函数会自动返回圆括号里的JSX内容：

{this.props.siswa.map(siswa => (
  <div key={siswa.id} className="flex"> 
    <div className="py-8 px-8 w-full lg:max-w-sm bg-white rounded-xl shadow-md hover:shadow-xl space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-indigo-600 ml-0 lg:ml-3 sm:mt-2 md:w-full">
      <img className="block mx-auto object-cover w-24 h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src={`/img/siswa/${siswa.id}.jpg`} loading="lazy" />
      <div className="text-center space-y-2 sm:text-left">
        <div className="space-y-0.5">
          <p className="text-lg text-black font-semibold dark:text-gray-200">
            {siswa.panggilan}
          </p>
          <p className="text-gray-500 font-medium dark:text-gray-300">
            {siswa.nama}
          </p>
        </div>
        <button id="om" className="px-4 py-1 text-sm text-indigo-600 font-semibold rounded-full border border-indigo-400 hover:text-white hover:bg-indigo-600 hover:border-transparent focus:outline-none focus:ring-1 focus:ring-indigo-600 focus:ring-offset-2 dark:text-gray-200 dark:border-white dark:hover:text-gray-200 dark:hover:border-indigo-800 dark:hover:bg-indigo-800 dark:focus:ring-indigo-800 w-full md:w-2/4" onClick={() => this.setState({showModalSiswa: true})}>Detail</button>
      </div>
    </div>
  </div>
))}

方法2：显式添加return语句

如果想保留花括号包裹代码块，就在JSX前面加上return关键字：

{this.props.siswa.map(siswa => { 
  console.log(siswa);
  return (
    <div key={siswa.id} className="flex"> 
      {/* 后续JSX内容和上面一致 */}
    </div>
  )
})}

另外还要提醒你：React遍历渲染列表时，一定要给每个子元素加上唯一的key属性（我上面的代码已经加了key={siswa.id}），这能帮React更高效地更新DOM，避免不必要的重渲染哦。

现在再运行代码，页面应该就能正常显示数据啦！

内容的提问来源于stack exchange，提问作者Nizar