时间戳

首页 > 解决方案 > 在 React JS 文件之一中无法访问 process.env

reactjs - 在 React JS 文件之一中无法访问 process.env

问题描述

下面是我的客户端 React JS 代码的文件夹结构。我可以process.env从account,checkout页面访问，但不能访问，chat即使聊天与其他两个相比位于同一文件夹目录中。

|-- client
    |-- src
        |-- account
            |-- account.js
            |-- account.css
        |-- checkout
            |-- checkout.js
            |-- checkout.css
        |-- chat
            |-- chat.js
            |-- chat.css

更新 - 这是我的聊天组件

import "./chat.scss";
import { to_Decrypt, to_Encrypt } from "../../aes.js";
import { process } from "../../store/action/index";
import React, { useState, useEffect, useRef } from "react";
import ReactStars from 'react-stars';
import moment from 'moment';
import { render } from 'react-dom'
import { useDispatch } from "react-redux";
import axios from 'axios';
import { useHistory } from "react-router-dom";
import ratingImg from '../../public/review.png';

function Chat({ username, roomname, socket, serverURL }) {
  const [text, setText] = useState("");
  const [messages, setMessages] = useState([]);
  const [review, setReview] = useState([]);
  const [rating, setRating] = useState([]);
  const [taskId, settaskId] = useState("");
  const [userId, setuserId] = useState("");
  const [isExpert, setisExpert] = useState(true);
  const [isLoggedIn, setisLoggedIn] = useState(false);
  const [isModelOpen, setisModelOpen] = useState(false);

  const dispatch = useDispatch();
  const question = localStorage.getItem('question');
  let history = useHistory();

  const dispatchProcess = (encrypt, msg, cipher) => {
    dispatch(process(encrypt, msg, cipher));
  };

  useEffect(() => {
    if(window.performance){
      if(performance.navigation.type == 1){
        console.log("This page is reloaded");
        socket.emit("joinRoom", { username, roomname });
      }
    }
    console.log(serverURL);
    axios.get(`${process.env.REACT_APP_SERVER_URL}/users/isLoggedIn`, {
      withCredentials: true,
      headers: {
          'Access-Control-Allow-Credentials' : true,
          'Access-Control-Allow-Origin' : 'http://localhost:3000',
          'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
      }
    })
    .then(function (response) {
        console.log(response.data);
        setuserId(response.data._id);
        if(!response.data){
            setisLoggedIn(false);
            history.push('/');
        }
        else{
            setisLoggedIn(true);
            axios.get(`${process.env.REACT_APP_SERVER_URL}/tasks/room_details/${roomname}`)
            .then(res => {
                console.log(res.data);
                settaskId(res.data.tasks[0]._id);
                if(res.data.tasks[0].username === username){
                  setisExpert(false);
                }
            });
        }
    });


    socket.on("message", (data) => {
      //decypt
      const ans = to_Decrypt(data.text, data.username);
      dispatchProcess(false, ans, data.text);
      console.log(ans);
      let temp = messages;
      temp.push({
        userId: data.userId,
        username: data.username,
        text: ans,
      });
      setMessages([...temp]);

    });
  }, [socket]);

标签： reactjs

解决方案

我看到你还有其他process是从“../../store/action/index”导入的

import { process } from "../../store/action/index";

所以它覆盖了process系统。只需在导入时重命名您的流程

  import { process as processAction } from "../../store/action/index";

  const dispatchProcess = (encrypt, msg, cipher) => {
    dispatch(processAction (encrypt, msg, cipher));
  };

推荐阅读