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

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

const 和 javascript 中的 let 是块作用域的，这意味着它们只存在于您定义它们的块中。这就是为什么在这种情况下，与 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>
   }
}

Answer 2

删除 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

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

How to define an object inside the render part?

reactjs

conditional-rendering