Не удалось получить данные: this.functionname не является функцией (ReactJS)

Question

У меня есть функция в методе рендеринга компонента реагирования, который я вызываю внутри return (), как показано:

render () {
  const Viewperson = () =>{
    return (
      console.log("show perons");
    );
  }
  return (
    {this.Viewperson()}
  );
}

Я получаю следующую ошибку "Не удалось получить данные: this.Viewperson не является функция "Не вижу, где я допустил ошибку. Любые предложения заметны.

Answer 1

this относится к экземпляру класса. Функция находится внутри рендера и не является методом класса:

render () {
  const viewPerson = () => {
    return <div>Person</div>;
  }

  return viewPerson();
}

Если бы внутри самого класса был определен viewPerson, вы бы использовали this:

class Facebook extends Component {

  // ....

  viewPerson() {
    return <div>View Person</div>;
  }

  render() {
    return this.viewPerson();
  }
}

Уведомление что возврат console.log(), скорее всего, покажет вам ошибку, поскольку вы ничего не возвращаете. Просто верните JSX (<div>Hi</div>), если вам нужно проверить, работает ли он.

Кроме того, я немного переформатировал ваш код. camelCase обычно используется в объявлениях функций или переменных, PascalCase обычно для классов или компонентов JSX. Вот несколько примеров:

class ViewPerson() ...

function viewPerson() { return <div>...</div> }
const viewPerson = () => (<div>...</div>)

// A more advanced version:
render() {
  // refers to a Component, so PascalCase ?
  const WhichPerson = teacher ? ViewTeacher : ViewStudent;

 // variable holding JSX, so camelCase ?
  const person = <WhichPerson>Person details...</WhichPerson>;

  return person;
}

Это может немного сбить с толку, так что не беспокойтесь об этом слишком сильно. Вы будете помнить это позже:)