Question

我有一个问题，我使用 getInitialProps 来获取数据，但我在网络上显示它没有出现，但如果我的数据是 try console.log，数据将相应地出现

{this.props.siswa.map(siswa => {
  {console.log(siswa)}
  <div 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>
})}

这是我执行 console.log 时出现的数据

{
  id: '1',
  nama: 'Ipsun',
  panggilan: 'ipsun',
  ttl: 'ipsun',
  alamat: 'ipsun',
  nope: '43143',
  ig: '@ipsun',
  line: null,
  telegram: null,
  tiktok: null,
  fb: null,
  linkedin: null,
  pesan: 'ipsun'
}
{
  id: '2',
  nama: 'lorem',
  panggilan: 'lorem',
  ttl: 'lorem',
  alamat: 'lorem',
  nope: '41413',
  ig: '@lorem',
  line: null,
  telegram: null,
  tiktok: null,
  fb: null,
  linkedin: null,
  pesan: 'lorem'
}

Answer 1

这是因为您没有从 .map 返回任何 jsx ;)

{this.props.siswa.map(siswa => {
  {console.log(siswa)}
 return (
   <div 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>
  )
})}

Answer 2

或者你可以这样返回：

{this.props.siswa.map(siswa => 
  <div 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>
}

Answer 3

或者，您可以使用隐式返回来省略 return 关键字：

const ComponentTest = ({ siswa }) =>
  siswa.map((siswa) => (
    <div className="flex">
      {console.log(siswa)}
      <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>
  ));

注意 console.log 在 JSX 中，这很好，因为它用大括号括起来并被评估。

NextJS，它不显示在网络上，但如果数据显示在console.log中

3 个答案: