React：如何在JSX中定义临时变量并遍历对象键值对？

你可以通过以下几种方式实现临时存储对象，避免重复调用函数，且无需全局变量或状态变量：

1. 在render方法内提前计算对象（最推荐） #

在JSX渲染逻辑之前，先调用函数获取对象并存储在局部变量中，后续遍历直接使用该变量：

render() {
  // 提前计算并存储，只调用一次函数
  const dpsData = this.getDpsData(this.state.selectedComponentData);
  
  return (
    <div>
      {Object.keys(dpsData).map(key => (
        <div className="componentStatus" key={key}>
          <div className="metaDataKey">{key}</div>
          <div className="metaDataValue">{dpsData[key]}</div>
        </div>
      ))}
    </div>
  );
}

这种方式可读性最高，逻辑清晰，也是React开发中的常规做法。

2. 使用立即执行函数（IIFE）在JSX内部包裹逻辑 #

如果不想把变量提到render顶部，可以用IIFE在JSX内部创建临时作用域存储对象：

render() {
  return (
    <div>
      {(() => {
        const dpsData = this.getDpsData(this.state.selectedComponentData);
        return Object.keys(dpsData).map(key => (
          <div className="componentStatus" key={key}>
            <div className="metaDataKey">{key}</div>
            <div className="metaDataValue">{dpsData[key]}</div>
          </div>
        ));
      })()}
    </div>
  );
}

3. 结合Object.entries简化键值对遍历 #

如果需要同时获取键和值，可以用Object.entries配合提前存储的对象，省去通过键取值的步骤：

render() {
  const dpsData = this.getDpsData(this.state.selectedComponentData);
  
  return (
    <div>
      {Object.entries(dpsData).map(([key, value]) => (
        <div className="componentStatus" key={key}>
          <div className="metaDataKey">{key}</div>
          <div className="metaDataValue">{value}</div>
        </div>
      ))}
    </div>
  );
}

注意事项 #

• 务必给遍历生成的React元素添加key属性，这是React列表渲染的要求，能避免不必要的重渲染和警告。
• 你原来的代码中在Object.keys内赋值的写法虽然能运行，但可读性差且可能产生意外副作用，不建议使用。

内容的提问来源于stack exchange，提问作者rahul Kushwaha