Reactjs + Redux + Material-table: не получает данные, потому что не проверяет их при загрузке - PullRequest
0 голосов
/ 24 апреля 2020

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

const Equipo = ({ reduxEquipo: { equipos, cargando }, getEquipos }) => {
  useEffect(() => {
    getEquipos();
    // eslint-disable-next-line
  }, [getEquipos]);

  const equiposData = equipos.map(e => ({
    key: e._id,
    numero: (
      <Badge color='primary'>
        {<div style={{ fontSize: '12px' }}>{e.numero}</div>}
      </Badge>
    ),
    direccionip: e.direccionip,
    usuario: e.usuario,
    password: '********',
    interfases: (
      <Button
        round
        justIcon
        size='sm'
        color='github'
        //onClick={() => confirmData(e.usuario, e._id)}
      >
        <Apps />
      </Button>
    ),
    descripcion: e.descripcion,
    acciones: (
      <div>
        {/* Editar Usuario */}
        <Button round justIcon size='sm' color='github'>
          <Edit />
        </Button>{' '}
        {/* Eliminar Usuario */}
        <Button
          round
          justIcon
          size='sm'
          color='github'
          //onClick={() => confirmData(e.usuario, e._id)}
        >
          <Delete />
        </Button>
      </div>
    )
  }));

  return (
    <div>
      <div className={classNames(classes.main, classes.mainRaised)}>
        <div className={classes.container}>
          <Card plain>
            <CardBody plain>
              <h3 className={classes.cardTitle}>Equipos...</h3>
              <br />
              {cargando ? (
                <CustomLinearProgress color='primary' />
              ) : (
                <MaterialTable
                  title={'Equipos...'}
                  columns={[
                    { title: 'Equipo', field: 'numero' },
                    { title: 'Dirección IP', field: 'direccionip' },
                    { title: 'Usuario', field: 'usuario' },
                    { title: 'Contraseña', field: 'password' },
                    { title: 'Interfaces', field: 'interfases' },
                    { title: 'Descripción', field: 'descripcion' },
                    { title: 'Acciones', field: 'acciones' }
                  ]}
                  isLoading={cargando}
                  data={equiposData}
                  options={{
                    showTitle: false,
                    paging: false,
                    search: true,
                    headerStyle: {
                      textAlign: 'center'
                    },
                    cellStyle: {
                      textAlign: 'center'
                    }
                  }}
                />
              )}
            </CardBody>
          </Card>
        </div>
      </div>
    </div>
  );
};

Equipo.propTypes = {
  getEquipos: PropTypes.func.isRequired,
  reduxEquipo: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  reduxEquipo: state.reduxEquipo
});

export default connect(mapStateToProps, { getEquipos })(Equipo);

с наилучшими пожеланиями

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...