React-next.js中渲染变量的坑报错Error: React.Children.only expected to receive a single React element child.
<p>这个问题再 react 前端渲染的时候是没有问题的，但是在next ssr的项目中会出现：</p><p><img src="https://img-blog.csdnimg.cn/20200910175939740.png"></p>
<p>在字段中类型不一样的时候，如果你写的是：</p>
<p><img src="https://img-blog.csdnimg.cn/20200910180027804.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xsbG9taA==,size_16,color_FFFFFF,t_70"></p>
<p>会导致报出奇怪的错误，很难定位的那种如图：</p>
<p style="text-align: center"><img src="https://img-blog.csdnimg.cn/20200910180115604.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xsbG9taA==,size_16,color_FFFFFF,t_70"></p>
<p>会直接报前面 setState 的错误，确实让人摸不着头脑。 </p>
<p>还有一种情况也会导致一样的报错:</p>
<p style="text-align: center"><img src="https://img-blog.csdnimg.cn/20200911135626657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xsbG9taA==,size_16,color_FFFFFF,t_70"></p>
<p> </p>
<p>--------分割线------------------------------</p>
<p>这里换成 :</p>
<p><img src="https://img-blog.csdnimg.cn/20200911143843104.png"></p>
<pre><code class="language-html hljs">import Link from 'next/link' 中不支持多个标签</code></pre>
<p> </p>
<p>后来发现，是类型的问题，这render 好像只能渲染字符串的数据：于是乎改成:</p>
<p><img src="https://img-blog.csdnimg.cn/20200910180346231.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xsbG9taA==,size_16,color_FFFFFF,t_70"></p>
<p>转为字符串成功,不再报之前的错误了! </p>
<p>至此:解决该问题</p><br><br>
来源：https://www.cnblogs.com/lllomh/p/14991876.html
頁:
[1]