如何修复 React：字符串与预期的模式错误不匹配答案

【问题标题】：How do I fix React: The string did not match the expected pattern error如何修复 React：字符串与预期的模式错误不匹配
【发布时间】：2021-08-21 05:18:41
【问题描述】：

我正在创建一个测试应用程序以在 React 仪表板中显示 Airtable 项目。我的index.js 文件包含以下内容：

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Cotter from "cotter";
import { useEffect, useState } from "react";
const cotterApiKeyId = process.env.NEXT_PUBLIC_COTTER_API_KEY_ID;

export default function Home() {
    const [clientProjects, setClientProjects] = useState(null);

    // Gets this client's projects when they're logged in
    const getClientProjects = async () => {
        const token = localStorage.getItem("ACCESS_TOKEN");
        const resp = await fetch("/api/projects", {
            headers: { Authorization: `Bearer ${token}` },
        });
        setClientProjects(await resp.json());
    };

    const [isLoggedIn, setIsLoggedIn] = useState(false);

    // Shows the Cotter Login form and sets Access Token when authenticated
    useEffect(() => {
        const cotter = new Cotter(cotterApiKeyId);
        cotter
            .signInWithOTP()
            .showEmailForm()
            .then(payload => {
                localStorage.setItem("ACCESS_TOKEN", payload.oauth_token.access_token);
                setIsLoggedIn(true);
                getClientProjects();
            })
            .catch(err => console.log(err));
    }, []);

    // Sets local isLoggedIn variable
    useEffect(() => {
        if (localStorage.getItem("ACCESS_TOKEN") != null) {
            setIsLoggedIn(true);
        }
    }, []);

    // Deletes Access Token and logs user out
    const logOut = () => {
        localStorage.removeItem("ACCESS_TOKEN");
        setIsLoggedIn(false);
    };

    // Allow clients to mark a project as complete
    const markProjectComplete = async (e) => {
        const completeProjectId = e.target.value;
        setClientProjects(clientProjects.map(project => {
            if (project.id === completeProjectId) {
                project.complete = true;
            }
            return project
        }));

        const token = localStorage.getItem("ACCESS_TOKEN");
        await fetch("/api/projects/" + completeProjectId, {
            headers: { Authorization: `Bearer ${token}` },
            method: "PUT",
        });
    };

    // Display the client portal page
    return (
        <div className={styles.container}>
            <Head>
                <title>Client Portal</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>

            <main className={styles.main}>
                <h1 className={styles.title}>Welcome to Your Client Portal</h1>
                {isLoggedIn ? (
                    <div>
                        {clientProjects ? (
                            <div className={styles.grid}>
                                {clientProjects.map(project =>
                                    <div className={styles.card} key={project.id}>
                                        <h3>{project.name}</h3>
                                        <img src={project.project_images[0]} style={{maxWidth: "100%"}} />
                                        <p>Led by {project.project_lead.name}</p>
                                        <p>Due on {project.due_date.split('T')[0]}</p>
                                    </div>
                                )}
                            </div>
                        ) : (<p>You currently have no projects attached to this account.</p>)}
                        <p style={{textAlign: "center", cursor: "pointer"}} onClick={logOut}>Log Out</p>
                    </div>
                ): (<p>Log in to view your projects.</p>)}
                <div id="cotter-form-container" style={{ width: 300, height: 200 }} />
            </main>
        </div>
    )
}

我在应用程序中使用 Syncinc 和 Cotter，我的 api 密钥环境变量存储在 .env.local。

但是，在运行 npm run dev 时，我在命令行中收到以下错误：

错误：连接 ECONNREFUSED 127.0.0.1:5432 在 TCPConnectWrap.afterConnect [as oncomplete] (node:net:1133:16) { 错误号：-61，代码：'ECONNREFUSED'，系统调用：'连接'，地址：'127.0.0.1', 端口：5432 }

With the String does not match 登录后出现在前端的意外模式错误。我该怎么做才能解决这个问题？

Github：https://github.com/acord-robotics/api-heroku

【问题讨论】：

你能检查哪个应用程序在端口5432 上吗？可能与const cotterApiKeyId有关，你能把console.log(cotterApiKeyId)放上来吗？

标签： reactjs airtable

【解决方案1】：

我修好了！我最初使用 glitch.com 上的 react-starter-project 与导入和运行 npm run dev 等内容产生了冲突。我在将它发送到 Glitch.com 之前在 Github Codespaces 容器上创建了它，它正在工作。

感谢@somallg 的建议。

【讨论】：