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

问题描述

在我的渲染代码中，我创建了一个地图，以便将它与 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>
   }
}

解决方法

javascript 中的

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

    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>
   }
}

,

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

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