Невозможно отобразить список пользователей с Meteor + React - PullRequest
Новая
       6

Невозможно отобразить список пользователей с Meteor + React

0 голосов
/ 09 января 2019

Я новичок в React и очень стараюсь сделать список пользователей для простой таблицы управления пользователями, которую я пытаюсь построить. Если кто-то сможет увидеть, в чем я ошибся, было бы очень признательно, если бы вы сообщили мне об этом, поскольку я тратил на это кучу времени и читал все, что мог найти, но все еще не увенчался успехом.

Я пробовал много разных вариантов, но сейчас у меня есть: 

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import PropTypes from 'prop-types';

class ManageUsers extends React.Component {
constructor(props) {
  super(props);
    this.state = {
      users: []
    };
}
renderUsers() {
  return this.props.users.map((users) => {
    return <ManageUsers key={users._id} user={users}/>;
  });
};

  render() {
    return (
      <div>
        <li>{this.renderUsers()}</li>
      </div>
    );
  }
};

ManageUsers.propTypes = {
  users: PropTypes.array.isRequired
};

export default withTracker(() => {
  Meteor.subscribe("users");
  return {
  users: Meteor.users.find({}).fetch()
  }
})(ManageUsers);

Я получаю несколько разных ошибок с этим в консоли браузера, включая:

Uncaught TypeError: Невозможно прочитать свойство 'map' из неопределенного


Предупреждение: сбойный тип опоры: опора users помечена как обязательная для ManageUsers, но его значение равно undefined.

1 Ответ

0 голосов
/ 09 января 2019

Uncaught TypeError: Невозможно прочитать свойство 'map' из неопределенного

Либо проверьте, что users определено перед отображением, либо задайте ему значение пропета по умолчанию. 

renderUsers = () => {
  const { users } = this.props;
  return users && users.map(user => <ManageUsers key={user._id} user={user}/>);
};

или 

ManageUsers.defaultProps = {
  users: [],
};

Предупреждение: сбойный тип проп: пользователи пропов помечены как необходимые в ManageUsers, но его значение не определено.

Обычно это означает, что, хотя это и является обязательной опорой, вы, вероятно, не передаете ей определенные данные из родительского компонента.

В этом случае, похоже, что Meteor HOC не предоставляет данные users, когда компонент реагирования монтируется. Я не знаком с Meteor, но, возможно, вы могли бы сделать функцию подписки асинхронной и дождаться ее разрешения со значением для users prop. 

export default withTracker(async () => {
  Meteor.subscribe("users");
  return {
    users: await Meteor.users.find({}).fetch()
  }
})(ManageUsers);
...