NextJS，它不会显示在 Web 上，但如果数据显示在控制台中.log

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省略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中，这很好，因为它用花括号括起来并进行求值。