渲染条件不起作用- Next.js

Question

此页面由getStaticPaths和getStaticProps生成，具有[projectSlug].tsx，

问题是当状态改变时，<h1>{counter}</h1>被修改，但条件不受变化的影响。

const [counter, setCounter] = useState(0); 
<>
<h1>{counter}</h1>
{counter % 2 === 0 ? (
<div> Hola 1 </div>
) : (
<div> Hola 2 </div>
)
}
</>

我还没能找到任何解决办法。

Answer 1

不需要在有条件呈现的div元素周围使用圆括号。删除它们，看看是否能解决问题。

Answer 2

测试代码。它运行。重新启动计算机并重新测试。

你可以使用getStaticProps作为useState的默认值吗?

如果你使用getStaticProps，该页代码在编译器构建时只使用一次。

所以如果getStaticProps的参数被改变，页面不会被改变。

如果是这种原因，您需要将getStaticProps更改为getServerSideProps或获取参数slug或SWR等。