如何根据 nexts js 中的一些选择选项呈现动态价格？

Question

我有 2 个带有一些选项的不同选择标签，我正在根据选择呈现不同的图像，我想根据选项在下面呈现不同的价格。例如：如果我选择“您当前的部门”选项为 Iron，选择“Your Desire League”选项为 Bronze/Silver/Gold，我希望更改价格。对于图像，我正在硬编码一些 if's 来检查所选选项是什么。

<div className="text-gray-500 mt-7">
  <select name="divisions" onChange={slbz2} id="listt" className="bg-gray-200 pr-14 pl-2 py-2">
    <option value="ironn">Iron</option>
    <option value="bronze">Bronze</option>
    <option value="silverr">Silver</option>
    <option value="goldd">Gold</option>
    <option value="platt">Platinum</option>
    <option value="diaa">Diamond</option>
  </select>
</div>
<div className="mt-5">
  <select name="divisions" onChange={slbz2} id="tierr" className="bg-gray-200 pr-12 pl-2 py-2">
    <option value="44">Division IV</option>
    <option value="33">Division III</option>
    <option value="22">Division II</option>
    <option value="11">Division I</option>
  </select>
</div>

and some conditions

在这里你可以看到一个演示：https://elowish-2.vercel.app/pricing

Answer 1

在这种情况下，useEffect() 非常有帮助。
参考->ReactJS Doc

假设 state1 作为“您当前的部门”的状态变量。
state2 作为“Your Desire League”的状态变量。

在 useEffect 的依赖数组中使用 state1 和 state2。

useEffect(() => {
    // Update your final state accordingly
}, [state1, state2]);

更新 1： 查看您的条件截图后，您似乎没有使用 useState Please refer Doc。