Не удалось получить элемент из DynamoDB через React form-submit, но через автономный код nodejs он работает

Я пытаюсь запросить у DynamoDB простой экран входа в систему. Я использую ReactJS

export  class Login extends Component {

  constructor(props) {
    super(props);

    this.props = props;

    this.state = {
      caffeID: "",
      password: "",
      validUser: false
    };
  }

  validateForm() {
    return this.state.caffeID.length > 0 && this.state.password.length > 0;
  }

  handleChangeEvent(event) {
    this.setState({
      [event.target.id]: event.target.value
    });
  }

  handleSubmit (event){
    event.preventDefault();
    console.info(this.props);

   // console.info("hoooolllla ..Caffe ID is "+this.state.caffeID+" and password is "+this.state.password);
    console.info("checking from db");
    var docClient = new AWS.DynamoDB.DocumentClient({apiVersion: '2012-08-10'});
    console.info("Caffe ID ==> "+this.state.caffeID);
    var params = {
            TableName: 'caffeuser',
            Key: {'caffeid': this.state.caffeID}
     };

       var value=    docClient.get(params, function(err, data) {
               console.info("Querying database..");
             if (err) {
               console.info("Error", err);
             } else {
               console.info("Success", data.Item);
             }
           });
  }

  render() {

      if (this.state.validUser === true) {

          console.info("Redirecting to login screen... .");
          return <Redirect to='/table' />
        };

    return (

      <div className = "Login">

        <form onSubmit = {this.handleSubmit.bind(this)}>
          <FormGroup controlId = "caffeID" bsSize = "large">
            <ControlLabel>Caffe ID</ControlLabel>
            <FormControl
              autoFocus
              type = "caffeID"
              value = {this.state.caffeID}
              onChange = {this.handleChangeEvent.bind(this)}
            />
          </FormGroup>
          <FormGroup controlId = "password" bsSize = "large">
            <ControlLabel>Password</ControlLabel>
            <FormControl
              value = {this.state.password}
              onChange = {this.handleChangeEvent.bind(this)}
              type = "password"
            />
          </FormGroup>
          <Button
            block
            bsSize = "large"
            disabled = {!this.validateForm()}
            type = "submit"
          >
            Login
          </Button>
        </form>
      </div>



    );
  }
}

export default Login;

Теперь код для подключения и запроса Dynamodb, похоже, застрял.

Не удалось получить элемент из DynamoDB через React form-submit, но через автономный код nodejs он работает

Но если я запускаю тот же фрагмент кода, что и автономный js-код node, он работает отлично.

Вот код Node Js

var AWS = require('aws-sdk');
//Set the region 
AWS.config.update({region: 'us-east-2',
 accessKeyId: 'xxxxxxxxxxxxxx',
secretAccessKey: 'xxxxxxxxxxxxxx'    
});

 var docClient = new AWS.DynamoDB.DocumentClient({apiVersion: '2012-08-10'});
    var params = {
            TableName: 'caffeuser',
            Key: {'caffeid': 'C0001'}
     };

           docClient.get(params, function(err, data) {
               console.info("Querying database..");
             if (err) {
               console.info("Error", err);
             } else {
               console.info("Success", data.Item);

Вот результат кода Node JS

Querying database..
Success { caffeid: 'C0001', password: 'abc123' }

Не могли бы вы указать мне, где я делаю не так? Должен ли я использовать async-await для этого сценария?

============================================

Редактировать 6 ноября 2018 г.,

Я загрузил скриншот запроса.

Как вы авторизуетесь в браузере? В node.js вы делаете AWS.config.update. Что вы делаете вместо этого в браузере?

Can Sahin 06.11.2018 13:35

Я делаю то же самое и в React JS ..

DukeLover 06.11.2018 13:43

Привет, @CanSahin, еще одна вещь, я выполняю эту операцию запроса к базе данных без функции рендеринга. Итак, будет ли здесь задействован браузер?

DukeLover 06.11.2018 14:03

config в реакции не отображается в вашем коде. Вот почему я спросил. Внутренний рендер или внешний вид не имеет значения. Оба являются js-функциями. Можете ли вы поделиться подробностями этого скриншота запроса, который застрял? Я не могу придумать конкретную причину, по которой это не работает. Может проблема с cors? Возможно проблема с учетными данными. Трудно угадать

Can Sahin 06.11.2018 14:35

привет @CanSahin, большое спасибо за ответ. вот скриншот зависшего запроса: imgur.com/a/y2S5q3u

DukeLover 06.11.2018 14:38

Привет, @CanSahin, еще одна вещь, эта переменная AWS, которую я импортирую из другого файла js. import AWS from "components/Database/database.jsx";. А содержимое database.jsx таково: var AWS = require('aws-sdk'); //Set the region AWS.config.update({region: 'us-east-2', accessKeyId: 'xxxxxxxxxxxxxxxxx', secretAccessKey: 'xxxxxxxxxxxxxxxxx', dynamoDbCrc32: false }); export default AWS;

DukeLover 06.11.2018 14:48

Хм. Честно говоря, я понятия не имею. Если вы считаете, что параметры публикации верны (чего я не вижу), то я не могу понять, почему. Это не возвращает вам ошибку авторизации, поэтому ваша конфигурация должна успешно применяться. Кстати, использование Dynamodb на стороне клиента - не лучший вариант. Подумайте о том, чтобы спрятать его за серверной частью. Или используйте учетные данные когнито для временного доступа к вашему динамодуля.

Can Sahin 06.11.2018 15:57

привет @CanSahin, могу ли я использовать express js для выполнения запроса от Dynamodb из этого кода реакции? Но и в этом случае проблема возникнет, верно?

DukeLover 06.11.2018 16:24

ExpressJs? Это библиотека веб-приложений узла. Не имеет ничего общего с клиентской стороной и особенно в вашем случае. Я предлагаю вам найти пример или лучшие практики для Dynamodb. Я не думаю, что вы можете найти примеры доступа к Dynamodb с учетными данными в браузере. Я не могу помочь в этом случае. Я не могу понять почему, потому что у меня никогда не было такой потребности. У меня никогда не будет.

Can Sahin 07.11.2018 12:59
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
9
153
0

Другие вопросы по теме