Вызов функции в React

Question

У меня есть эта функция:

public getPermissions() {
  const { listItems } = this.state;

  {listItems.length > 0 && listItems.map((item: Project) => {
    let web = new Web(item.ListUrl);

    web.getCurrentUserEffectivePermissions().then(perms => { 
      if (web.hasPermissions(perms, PermissionKind.ViewPages)) {
        return item.Title
      } else {
        return console.log('NOT Access');
      }
    } 

Я пытаюсь вызвать эту функцию внутри компонента React:

public render() {
  return (
    <div>  ///error message
      {this.getPermissions()}
    </div>
  )
}

Однако я получаю сообщение об ошибке для первого div:

"[ts]
Type '{ children: void; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ children: void; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property 'children' are incompatible.
      Type 'void' is not assignable to type 'ReactNode'.
(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>"

Что означает эта ошибка?Как я могу вызвать функцию getPermissions в функции рендеринга?

Answer 1

Этот метод не возвращает JSX.Вы должны вызывать такого рода события в методах жизненного цикла, или вы можете просто вызвать его до return из render() метода, например:

render() {
  this.getPermissions();

  return (...)
}

или в componentDidMount (гораздо лучше, чем вызывать в render ()) lifecyle как:

    class YourComponent extends Component {  
      constructor(props) {
        super(props);

        this.state = { listItems: ... };
      }

      componentDidMount(){
        this.getPermissions();
      }

      getPermissions = () => {
        const { listItems } = this.state;

        {listItems.length > 0 && listItems.map((item: Project) => {
          let web = new Web(item.ListUrl);

          web.getCurrentUserEffectivePermissions().then(perms => { 
            if (web.hasPermissions(perms, PermissionKind.ViewPages)) {
             return item.Title
            } else {
              return console.log('NOT Access');
            }
         }
      }

      render() {
        return (...)
      }
    }