Реагируйте: Визуализация метода, определенного внутри функции стрелки?

Question

Привет друзья! Я надеюсь, что с тобой все в порядке.

У меня есть функция-стрелка с именем WorldInfo, и ее родительский компонент передает объект в подпорке, что в этом примере я просто вызываю object. Теперь в WorldInfo я также хочу проанализировать и перечислить items в object, поэтому я создал метод serverInfoTabList, чтобы взять object и протолкнуть его через .map. Моя проблема в том, что при компиляции мой браузер не распознает serverInfoTabList ни когда он определен, ни вызван в собственной функции возврата WorldInfo.

Вот ошибка и сам код.

 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>
    );
  }
}