标签: create-react-app

嗨，有人能告诉我为什么我得到 list.map 不是函数错误吗？我很确定我的 React 代码列出了一个数组，但我是一个初学者，所以我可能忽略了一些东西

import React, { useState, useEffect } from "react";
import Task from "./Task";

function Home() {  
  const [text, setText] = useState("");
  const [task, setTask] = useState("");
  const [list, setList] = useState([]);

  useEffect(() => {
    setList(list.push(task));
  }, [task]);

  const addTask = (e) => {
    e.preventDefault();
    setTask(text);
    setText("");
  };

  const updateText = (e) => {
    setText(e.target.value);
  };

  return (
    <div className="Home">
      <h3>Home Page</h3>
      <form onSubmit={addTask}>
        <input type="text" value={text} onChange={updateText} />
        <button type="submit">Add</button>
      </form>
      <div className="listoftasks">
        {list.map((t) => ( …

我正在尝试构建 react-create-app一个文件（包括 JS、CSS、PNG 等...）。

这是可能的，如何？

我应该尝试使用 rollup 还是可以使用 webpack？

我测试了https://www.npmjs.com/package/html-webpack-inline-source-plugin但看起来已经过时并且无法正常工作。

我有一个 create-react-app 应用程序，我通过添加以下内容启用了代理：

"proxy": "http://localhost:3001",

到我的 package.json。这适用于对 /graphql 的 API 请求，但是当 Web 浏览器请求 /graphql（用于加载 UI 以运行查询）由前端处理而不是代理时。是否也可以代理它？

当我尝试通过访问https://localhost:3000/auth/facebook进行 OAuth 时，会发生同样的事情，前端处理它而不是后端。

之前发生过此错误并已找到解决方案（https://github.com/facebook/create-react-app/issues/8465，运行 npm install create-react-app 时出现错误 404）。他们似乎都不适合我。还有其他想法吗？

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/creat-react-app - Not found
npm ERR! 404 
npm ERR! 404  'creat-react-app@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! …

操作系统：
使用 npx 创建反应应用程序的Windows我编写了以下命令：

npx create-react-app myapp

它显示此错误：

npm ERR! Could not install from "myusername\AppData\Roaming\npm-cache\_npx\19748" as it does not contain a package.json file.

我该如何解决？

我已经通过互联网扫描了两天，但我无法了解使用 react-routes 实现 SSR 的要点。在没有路线的情况下，我花了 5 天的时间才以某种方式理解这一切。但是现在我无法进一步理解使用react-routes。这是必要的细节-

服务器/server.js

import express from 'express';
import fs from 'fs';
import path from 'path';

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import {StaticRouter} from 'react-router-dom';

import App from '../src/App';

const PORT = process.env.PORT || 8080;

const app = express();

app.use(express.static(path.resolve('./build')))

app.get('*', (req, res) => {

    fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => {

    if (err) {
      console.log(err);
      return res.status(500).send('Some error happened');
        }

        const context = {};
        const app = ReactDOMServer.renderToString(
            <StaticRouter …

在我的应用程序中，我有一些具有以下内容的 css：

background-image: url("../../assets/img/webheader.jpg");

然后从这个 url 加载图像：http://localhost:3000/static/media/webheader.e3104798.jpg

现在，出于开发目的，我想从组件内的代码加载该图像，我得到这样的路径：

function getImages() {
    var prefix = process.env.PUBLIC_URL;
    let images = [
         prefix + '/assets/img/webheader.jpg'
    ];
    return images;
}

根据这个文档https://create-react-app.dev/docs/using-the-public-folder，我不得不从获得前缀process.env.PUBLIC_URL;或使用%PUBLIC_URL%。

前者给我一个空字符串作为前缀，后者在渲染 img 后给我这个错误：

**URIError: Failed to decode param '/%PUBLIC_URL%/assets/img/webheader.jpg'**

使用该数组中的值呈现 img HTML 元素只会给我一个状态代码 Status Code: 304 Not Modified

可能是什么问题呢？

有人问我如何使用 getImages()

我有一个具有构造函数的组件：

 class Portafolio extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            images: getImages()
        };
    }
    render() {
        return (
            <div>
                <NavBar/>
                <div className="container">
                    <GradientImages imageList={this.state.images}/>
                </div> …