如何在React JS的.map()函数内增加变量

Question

我有一段React代码，它会获取所有评估年份并将其填充到下拉列表中，但是在显示时，我想将其增加1。

比如评估年份为2020，我想在下拉列表中显示为FY：2020-2021。

以下代码会在下拉列表中填充，当我尝试对其进行递增时，它会附加1而不是加1。

   <select 
      class="form-control"  
      name="selected_FY"
      value="selected_FY" >

     {
         this.state.assessmentyears.map((fin, key) =>{
         return (  
          <option key={key} value={fin.year}>FY: {fin.year}-{fin.year+1}</option> 
          )
          })
       }                                  
 </select> 

- Vinod Kumar

---

这个回答解决了你的问题吗？将两个数字相加变成了连接它们，而不是计算它们的和。 - Reyno

似乎 fin.year 是一个字符串而不是一个数字。你需要先将它转换为数字，例如 Number(fin.year) + 1。 - Tsvetan Ganev

@theblackgigant 不是针对ReactJS代码的，但它指出了我犯的错误，谢谢。 - Vinod Kumar

Answer 1

问题在于您正在将数字'1'添加到字符串值上。在增加之前，您应该先解析它。

<select 
      class="form-control"  
      name="selected_FY"
      value="selected_FY" >

     {
         this.state.assessmentyears.map((fin, key) =>{
         return (  
          <option key={key} value={fin.year}>FY: {fin.year}-{Number(fin.year)+1}</option> 
          )
          })
       }                                  
 </select> 

- DevLoverUmar

Answer 2

请替换以下代码

<option key={key} value={fin.year}>FY: {fin.year}-{Number(fin.year)+1}</option> 

- Pavan Kalyan

Answer 3

问题点是 JavaScript 中的自动类型转换。如果您的值的类型为 string，那么当您尝试执行 +1 时，这个值将会自动转换成 string，因此计算结果将为 20201(如果该值为字符串 2020)。

解决方案非常简单，您只需要更改您的 value 的类型。如果您想要添加 1，则可以通过 Number() 来进行转换，这将把类型从字符串更改为数字，例如 Number('2020') + 1 将得到 2021。

- Clark