通過 AWS Lambda 和 Node 將數據從 React 中的表單發送到 DyanmoDB

Question

我正在嘗試使用 AWS Lambda 和 Node 將項目寫入 DynamoDB 表。 我可以毫無問題地硬編碼我想要查看的值，但是當我向 React 中的前端寫入內容時，我無法弄清楚如何查看任何內容。 但是我在查看網絡時收到了 200 成功消息。 1. 我大致改編自本教程。 2. 這是我在 Lambda 中的函數：

const AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.DocumentClient({region: "us-east-1"});

exports.handler = (event, context, callback) => {
    console.log("Processing...");
    const params = {
        Item: {
            Corpus_Name: [], 
            Source_Name: []
        },

        TableName: "corpusTest"

    };
    const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
    },
    body: JSON.stringify('Item Added'),
  };

    docClient.put(params, function(err, data) {
        if(err){
            callback(err, null);
        } else {
            callback(null, data);
        }
    })
};

使用 const Params 我可以硬編碼任何我想要的東西，但我不知道該放什么來告訴它實際接受我在我的網絡表單中輸入的內容。 1. 這是我在 React 中的 form.js：

import React, { Component } from 'react';
import axios from 'axios';

export default class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Corpus_Name: '',
      Source_Name: '',
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleCorpusChange = this.handleCorpusChange.bind(this);
    this.handleSourceChange = this.handleSourceChange.bind(this);
  }

  handleCorpusChange = (event) => {
    this.setState({
      Corpus_Name: event.target.value
    });
  }

  handleSourceChange = (event) => {
    this.setState({
      Source_Name: event.target.value
    });
  }



  async handleSubmit(event) {
    event.preventDefault();
    const { Corpus_Name, Source_Name } = this.state;
    await axios.post(
      'https://15ix4rukfb.execute-api.us-east-1.amazonaws.com/default/serverlessAppFunction',
      { key1: `${Corpus_Name}, 
        key2: ${Source_Name}` }
    );
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>Corpus_Name:</label>
          <input
            type="text"
            name="Corpus_Name"
            onChange={this.handleCorpusChange}
            value={this.state.Corpus_Name}

          />

          <label>Source_Name:</label>
          <input
            type="text"
            name="Source_Name"
            onChange={this.handleSourceChange}
            value={this.state.Source_Name}

          />

          <button type="submit">Send</button>
        </form>
      </div>
    );
  }
}

Corpus_Name 是我的分區鍵，Source_Name 是我的排序鍵（如果有幫助的話）。

Answer 1

您需要使用event參數來訪問通過前端發送的值。

exports.handler = (event, context, callback) => {
    console.log("Processing...");
    const params = {
        Item: {
            Corpus_Name: event.key1, 
            Source_Name: event.key2
        },

        TableName: "corpusTest"

    };
    const response = {

因為你在做這個

 await axios.post(
      'https://15ix4rukfb.execute-api.us-east-1.amazonaws.com/default/serverlessAppFunction',
      { key1: `${Corpus_Name}, 
        key2: ${Source_Name}` }
    );

Answer 2

我想到了。 在 form.js 中，我將 key1 和 key2 用引號括起來，但它們不應該如此。 結合執行 event.key1，event.key2 使其啟動並運行。