如何在渲染部分定义对象？

Posted 2023-02-22

【中文标题】如何在渲染部分定义对象？

【英文标题】：How to define an object inside the render part?

【发布时间】：2021-09-17 23:38:16

【问题描述】：

在我的渲染代码中，我创建了一个地图，以便将它与 React 的条件渲染一起使用，但我得到一个未定义的错误，因为它找不到它。有办法解决吗？

render()
    if(this.state.jsondata.prediction2)
        const occurrenceMap2 = Object.values(this.state.jsondata.prediction2).reduce((finalMap, item) => 
            finalMap[item] = ++finalMap[item] || 1;   
            return finalMap;
         , )
    
...

   this.state.jsondata.prediction2 &&
     <p> occurrenceMap2[0] </p>
   

【问题讨论】：

不要使用 if 语句

【参考方案1】：

如果this.state.jsondata.prediction2 没有值，则删除if 语句并声明一次occurrenceMap2 并设置默认值。

const occurrenceMap2 = this.state.jsondata.prediction2 && Object.values(this.state.jsondata.prediction2).reduce((finalMap, item) => 
  finalMap[item] = ++finalMap[item] || 1;   
  return finalMap;
 , ) || []; // set a default value here

【参考方案2】：

const 和 let 在 javascript 中是块作用域的，这意味着它们只存在于您定义它们的块中。这就是为什么在这种情况下，与 React 没有任何关系，您无法从 if 语句之外访问 occurenceMap2。试试这个：

    let occurrenceMap2 = [];
    if(this.state.jsondata.prediction2)
        occurrenceMap2 = Object.values(this.state.jsondata.prediction2).reduce((finalMap, item) => 
            finalMap[item] = ++finalMap[item] || 1;   
            return finalMap;
         , )
    
...

   this.state.jsondata.prediction2 &&
     <p> occurrenceMap2[0] </p>
   

【讨论】：

它就像一个魅力！非常感谢，是的，我忘记了块范围，我之前已经遇到过类似的问题。谢谢