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

Question

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

Answer 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

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