Javascript React：呈现在arrow函数中定义的方法？

朋友们好！我希望你身体好

我有一个名为

WorldInfo

的箭头函数，它的父组件在props中传递一个对象，为了这个示例，我只调用

object

。现在在

WorldInfo

中，我还想解析并列出

object

中的

项，因此我创建了方法
serverInfoTabList
，以获取
object
并将其推过
.map
。我的问题是编译时，我的浏览器无法识别
serverInfoTabList
，无论是在
WorldInfo
自身的返回函数中定义还是调用它

下面是错误和代码本身

 Line 7:5:    'serverInfoTabList' is not defined  no-undef
 Line 34:22:  'serverInfoTabList' is not defined  no-undef

constworldinfo=（道具）=>{
服务器信息列表=（对象）=>{
如果（对象！=未定义）{
返回object.item.map（（item）=>{
常数时间=数学计算（项目时间/60）
返回(
{item.name}


联机分钟数：{time}

);
});
}
}
返回(
道具。对象！=未定义？
{props.world.map}
{/*  */}

{serverInfoTabList（props.object）}

: 
无效的
);
}

谢谢你的时间，朋友们
 您忘记了
const
声明

const serverInfoTabList = (object) => {
    /* ... */
}

另一个问题是，您正在访问不存在的属性，例如
props.world
。此外，还通过未定义的属性
props.object.item
进行映射。我已经纠正了你的沙箱

const WorldInfo = props => {
  const serverInfoTabList = object => {
    return Object.keys(object).map(key => {
      const item = object[key];
      const time = Math.trunc(item.time / 60);
      return (
        <li key={item._id}>
          {item.name}
          <br />
          Minutes Online: {time}
        </li>
      );
    });
  };

  return props.object ? (
    <div className={props.className}>
      <h1>{props.world.map}</h1>
      {/* <img src={props.object.image}/> */}
      <div>
        <ul>{serverInfoTabList(props.object)}</ul>
      </div>
    </div>
  ) : null;
};

class Todo extends Component {
  render() {
    const object = { item1: { _id: 1, time: 1 }, Item2: { _id: 2, time: 2 } };
    return (
      <div>
        <WorldInfo object={object} world={{ map: "foo" }} />
      </div>
    );
  }
}

constworldinfo=props=>{
const serverInfoTabList=object=>{
返回Object.keys（Object.map）（key=>{
常量项=对象[键]；
常数时间=数学真理（item.time/60）；
返回(

{item.name}


联机分钟数：{time}

);
});
};
返回props.object(
{props.world.map}
{/*  */}
{serverInfoTabList（props.object）}
)：null；
};
类Todo扩展组件{
render（）{
const object={item1:{uid:1，time:1}，Item2:{{uid:2，time:2}；
返回(
);
}
}

您忘记了
const
声明

const serverInfoTabList = (object) => {
    /* ... */
}

另一个问题是，您正在访问不存在的属性，例如
props.world
。此外，还通过未定义的属性
props.object.item
进行映射。我已经纠正了你的沙箱

const WorldInfo = props => {
  const serverInfoTabList = object => {
    return Object.keys(object).map(key => {
      const item = object[key];
      const time = Math.trunc(item.time / 60);
      return (
        <li key={item._id}>
          {item.name}
          <br />
          Minutes Online: {time}
        </li>
      );
    });
  };

  return props.object ? (
    <div className={props.className}>
      <h1>{props.world.map}</h1>
      {/* <img src={props.object.image}/> */}
      <div>
        <ul>{serverInfoTabList(props.object)}</ul>
      </div>
    </div>
  ) : null;
};

class Todo extends Component {
  render() {
    const object = { item1: { _id: 1, time: 1 }, Item2: { _id: 2, time: 2 } };
    return (
      <div>
        <WorldInfo object={object} world={{ map: "foo" }} />
      </div>
    );
  }
}

constworldinfo=props=>{
const serverInfoTabList=object=>{
返回Object.keys（Object.map）（key=>{
常量项=对象[键]；
常数时间=数学真理（item.time/60）；
返回(

{item.name}


联机分钟数：{time}

);
});
};
返回props.object(
{props.world.map}
{/*  */}
{serverInfoTabList（props.object）}
)：null；
};
类Todo扩展组件{
render（）{
const object={item1:{uid:1，time:1}，Item2:{{uid:2，time:2}；
返回(
);
}
}

尝试使用
const
关键字声明它。还要注意的是，
map
只对数组有效，而不是对象。请尝试使用
const
关键字声明它。还要注意的是，
map
只对数组有效，对对象无效。这确实改变了错误。现在它说：“未处理的拒绝（TypeError）：this.serverInfoTabList不是函数”您是从
this
调用
serverInfoTabList
吗？您的意思是这样吗<代码>{this.serverInfoTabList（props.world）}

无论哪种方式，都会返回相同的错误。是的。但你不应该<代码>此用于基于类的组件。你能贴一个沙箱吗？嗯。是 啊那是个好主意。给我一点时间，我以前从来没做过。这确实改变了错误。现在它说：“未处理的拒绝（TypeError）：this.serverInfoTabList不是函数”您是从

this

调用

serverInfoTabList

吗？您的意思是这样吗<代码>{this.serverInfoTabList（props.world）}无论哪种方式，都会返回相同的错误。是的。但你不应该<代码>此用于基于类的组件。你能贴一个沙箱吗？嗯。是 啊那是个好主意。给我一点时间，我以前从未做过。