[英]Sending data from a form in React to DyanmoDB via AWS Lambda with Node
I'm trying to use AWS Lambda and Node to write items to a DynamoDB table.我正在尝试使用 AWS Lambda 和 Node 将项目写入 DynamoDB 表。 I can hard-code the values I want to see with no problem but I can't quite figure out how to see anything when I'm writing to my front-end which is in React.我可以毫无问题地硬编码我想要查看的值,但是当我向 React 中的前端写入内容时,我无法弄清楚如何查看任何内容。 But I get a 200 success message when looking at the network.但是我在查看网络时收到了 200 成功消息。 1. I broadly adapted from this tutorial . 1. 我大致改编自本教程。 2. Here's my function in Lambda: 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);
}
})
};
With the const Params I can hard code whatever I want but I can't figure out what to put to tell it to actually take in what I type in my web-form.使用 const Params 我可以硬编码任何我想要的东西,但我不知道该放什么来告诉它实际接受我在我的网络表单中输入的内容。 1. Here's my form.js in React: 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 is my partition Key and Source_Name is my sort key if that helps. Corpus_Name 是我的分区键,Source_Name 是我的排序键(如果有帮助的话)。
You need to use event
parameter to access the values sent via front end.您需要使用event
参数来访问通过前端发送的值。
exports.handler = (event, context, callback) => {
console.log("Processing...");
const params = {
Item: {
Corpus_Name: event.key1,
Source_Name: event.key2
},
TableName: "corpusTest"
};
const response = {
because you are doing this因为你在做这个
await axios.post(
'https://15ix4rukfb.execute-api.us-east-1.amazonaws.com/default/serverlessAppFunction',
{ key1: `${Corpus_Name},
key2: ${Source_Name}` }
);
I figured it out.我想到了。 In form.js I had key1 and key2 wrapped in quotes but they shouldn't have been.在 form.js 中,我将 key1 和 key2 用引号括起来,但它们不应该如此。 That combined with doing event.key1, event.key2 has it up and running.结合执行 event.key1,event.key2 使其启动并运行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.