React：渲染箭头函数中定义的方法？

Question

朋友们大家好！我希望你一切都好。

我有一个名为 WorldInfo 的箭头函数，它的父组件在 props 中传递一个对象，为了这个例子，我只是调用 object。现在在 WorldInfo 中，我还想解析并列出 object 中的 items，所以我创建了方法 serverInfoTabList 来获取 object 并将其推入.map。我的问题是在编译时，我的浏览器无法识别 serverInfoTabList，无论是在 WorldInfo 自己的 return 函数中定义还是调用时。

这是错误和代码本身。

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

const WorldInfo = (props) =>  {

    serverInfoTabList = (object) => {
        if (object != undefined){
            return object.item.map((item) => {
                const time = Math.trunc(item.time/60)
                return (
                    <li key={item._id}>{item.name}
                        <br/>
                        Minutes Online: {time}
                    </li>
                );
            });
        }
    }

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

谢谢你的时间！

Answer 1

您忘记了 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>
    );
  }
}

React：渲染箭头函数中定义的方法？

React: Rendering a method defined inside arrow function?

javascript

nested

reactjs

arrow-functions