reactjs - 使用 API 凭证的 .env.local 文件连接到我的 Airtable 数据库

问题描述

这是我第一次使用 .env 文件，我正在学习 Next.js。

我曾尝试阅读 Next.js 文档并在线搜索，但我听说他们最近更新了 Next.js，一切都发生了变化，我承认我目前的深度不够。

这是我的 .env.local 文件（出于显而易见的原因更改了 api 详细信息）

# .env
DB_URL=https://api.airtable.com/v0/
DB_APPID=app1234567890
DB_TABLE=Table%1234567890
DB_KEY=key1234567890

这是我的 create.js 页面：

import { useState } from "react";
import Router, { withRouter } from 'next/router'

export async function getStaticProps() {
  const db = await myDB.connect({
    AirBaseUrl: process.env.DB_URL,
    AirAppId: process.env.DB_APPID,
    AirTable: process.env.DB_TABLE,
    AirKey: process.env.DB_KEY,
  })
}

const Create = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [author, setAuthor] = useState('mario');


  const handleSubmit = (e) => {
    e.preventDefault();
    const blog = { title, body, author };

    fetch(AirBaseUrl + AirAppId + "/" + AirTable, {
      method: 'POST',
      headers: {
        'Authorization': "Bearer " + AirKey,
        "Content-Type": "application/json"
      },
      data: {
        "records": [
          {
            "fields": {
              "Notes": "Notes posted here",
              "Company Name": "Joe Blogs"
            }
          }
        ]
      },
      body: JSON.stringify(blog)
    }).then(() => {
      // history.go(-1);
      Router.push({
        pathname: '/'
      })
    })
  }

  const getAirtable = (e) => {
    e.preventDefault();
    const blog = { title, body, author };

    fetch(AirBaseUrl + AirAppId + "/" + AirTable, {
      method: 'GET',
      headers: {
        'Authorization': "Bearer " + AirKey,
        "Content-Type": "application/json"
      },
      body: JSON.stringify(blog)
    }).then(() => {
      // history.go(-1);
      Router.push({
        pathname: '/'
      })
    })
  }

  return (
    <div className="create">
      <h2>Add a New Blog</h2>
      <div>Airtable info to be posted here</div>
      <button onClick={getAirtable}>Get Airtable Data</button>
      <form onSubmit={handleSubmit}>
        <label>Blog title:</label>
        <input
          type="text"
          required
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <label>Blog body:</label>
        <textarea
          required
          value={body}
          onChange={(e) => setBody(e.target.value)}
        ></textarea>
        <label>Blog author:</label>
        <select
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
        >
          <option value="mario">mario</option>
          <option value="yoshi">yoshi</option>
        </select>
        <button>Add Blog</button>
      </form>
    </div>
  );
}

export default Create;

我目前收到一个错误：myDB is not defined

我也无法锻炼如何使用来自 .env.local 的凭据

我从文档中复制了这段文字：

export async function getStaticProps() {
  const db = await myDB.connect({
    AirBaseUrl: process.env.DB_URL,
    AirAppId: process.env.DB_APPID,
    AirTable: process.env.DB_TABLE,
    AirKey: process.env.DB_KEY,
  })
}

但我不确定 myDB 应该在哪里感知我的错误。

最后，您会注意到在代码中我有一个 GET 函数和一个 POST 函数，当您单击按钮时，它应该在 div 中发布 GET 信息，但我无法确定我会去做什么。POST 函数应在单击时将详细信息发布到 Airtable DB。我现在刚刚添加了虚拟信息。

谁能告诉我如何越过终点线？

标签： reactjsenvironment-variablesnext.js

为了从.env文件中显示环境变量，您可以使用类似dotenv的东西。这允许您从.env您指定的文件中加载环境变量。

require('dotenv').config({ path: './.env.local' })
console.log(process.env.FOO)

如果您.env在项目的根目录中（并且只是命名.env），那么您不需要传入路径配置

require('dotenv').config()

reactjs - 使用 API 凭证的 .env.local 文件连接到我的 Airtable 数据库

问题描述

解决方案

推荐阅读