我正在尝试使用 Tailwind 设置动态背景颜色。

但是，背景颜色并未应用于 div。我很困惑，因为当我检查检查器时，我可以看到在浏览器中，正确的 bg-${colors[index]} 已应用于每个 div，但颜色没有被渲染。

const colors = ['#7a5195', '#bc5090','#ef5675']

export default function App() {
  const names = ['Tyler', "Charles", 'Vince']
  let labels = {}

  names.forEach((name,index)=>{
    labels[name] = `bg-[${colors[index]}]`
  })

  return (
    <>
    {
      names.map((name)=>{
        return(
          <div className={`${labels[name]}`}>
        {name}
      </div>
          )
      })
    }
      
    </>
  );
}

我有一个表单，在提交时显示表单的结果，但更重要的是，滚动到显示结果的组件。我在尝试传递裁判和前锋裁判时陷入困境。我见过的所有演示都是同一文件中的组件。我的设置如下：

它App.js包含两个组件\xe2\x80\x93 Form.js，用于提交表单并Results.js显示表单提交的结果。该Results.js组件位于页面的下方，因此我想在用户单击表单上的 Enter 后滚动到该组件。

这是一个代码沙箱，演示了我的设置。

这里是相同的代码：

// App.js\nimport "./styles.css";\nimport Form from "./Form";\nimport Results from "./Results";\n\nexport default function App() {\n  return (\n    <>\n      <Form />\n      <Results />\n    </>\n  );\n}\n

// Form.js\nimport { forwardRef, useState } from "react";\n\nconst Form = forwardRef(({ onScroll }, ref) => {\n  const [name, setName] = useState("");\n\n  const onSubmit = (e) => {\n    e.preventDefault();\n    onScroll();\n  };\n\n  return (\n    <form onSubmit={onSubmit} className="tall">\n      <input value={name} …

问题是,给定坐标列表,确定最接近原点的k坐标的数量.

我已经能够确定点和原点之间的距离,但是当过滤最近的k点时,我迷路了.我决定将这个逻辑放在第二个for循环中,对距离最近到最远的数组进行排序,然后推送小于K的值.

function kClosest(points, k) {
    let length = [];
    let arr = [];
    let result = [];
    let a = 0;
    let b = 0;

    for (let i = 0; i < points.length; i++) {
        a = points[i][0]; //x coord
        b = points[i][1]; //y coord (y will always be second number or '1')
        length.push(parseFloat(calcHypotenuse(a, b).toFixed(4)))
        arr.push([points[i], length[i]])
    }

    function calcHypotenuse(a, b) {
        return (Math.sqrt((a * a) + (b * b)));
    }

    for (let i = 0; i < k; …

问题

我试图将环境变量传递到前端以显示 MapBox 中的地图。

我的尝试

1. 我已将 API 密钥放入目录的根目录中：

//.env.local
MAPBOX_KEY="abc123"

2. 在前端、客户端，我尝试加载该 ENV 来渲染地图：

//.env.local
MAPBOX_KEY="abc123"

上面的代码似乎没有识别API KEY。

3. 当我在此组件中使用 console.log(process.env.MAPBOX_KEY) 时，我可以在运行时在终端中看到 API 密钥yarn dev

有没有办法将这个环境加载到前端？

注意：我使用的是react-map-gl在 MapBox 之上构建的包

我正在尝试使用 React 更新对象数组中的单个键值对。

这是设置

对象数组

const array = [
  {id:1,name:'Tyler',age:23},
  {id:2,name:'Lauren',age:28},
  {id:3,name:'Nico',age:14},
]

给定 id 和年龄，我希望能够更新与 id 匹配的单个对象。例如，给定 id 2 和年龄 56，{id:2,name:'Lauren',age:28}应更改为{id:2,name:'Lauren',age:56}

我的方法

我已经设置 useState 来复制对象数组。但是，我正在努力筛选出选定的 id、更改年龄并返回更新后的数组。

这就是我目前所拥有的：

import { useState } from "react";

const array = [
  { id: 1, name: "Tyler", age: 23 },
  { id: 2, name: "Lauren", age: 28 },
  { id: 3, name: "Nico", age: 14 }
];

export default function App() {
  const [list, setList] = useState(array);

  const updateAge = (id …

我正在尝试将全局 scss 文件加载到 Storybook 中，但是一旦我将导入从.cssto更改为.scss，我就遇到了错误，从不@被识别到@import tailwind到ERROR in ./styles/globals.scss。这是我目前陷入的错误。

这是我的 main.js 文件.storybook

//.storybook/main.js
module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../components/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
    })

    return config
  },
  framework: '@storybook/react',
}

//.storybook/preview.js
import '../styles/globals.scss'

export const parameters = {
  actions: {argTypesRegex: …

我正在尝试使用命令行中的节点 js 测试 Visual Studio 代码中的 array.flat 方法。当我运行代码时，我得到：

“类型错误：arr.flat 不是函数”

我已经在 chrome 中运行了代码，并且能够获得所需的结果（扁平数组）

注意：即使将 node js 更新到最新版本，它仍然无法正常工作。

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
console.log(arr1)

我升级了本地计算机上的节点并从 迁移create-react-app到nextjs.

当我将代码推送到 AWS Amplify 时，出现以下错误：

error game-night@0.1.0: The engine "node" is incompatible with this module. Expected version ">=12.22.0". Got "12.21.0"

error Found incompatible module.

info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

我查看了 stackoveflow 和其他博客，并且尝试了所有方法，但仍然收到此错误。

我的试验：

• 添加了引擎：node到我的package.json

"engines": {
    "node": ">=12.22.0"
  }

• 运行这些命令：

sudo npm cache clean -f
sudo npm install -g n

• 仔细检查我的节点版本：

node -v                                                                              
v16.13.0

• 删除然后使用yarn install安装节点模块文件夹

为什么这个错误仍然出现？

我正在尝试将徽标图像（svg）添加到我的导航组件中。我正在使用 Storybook 和 next.js。

我遵循Storybook中的配置，但图像未加载到 Storybook 组件中。

为什么是这样？

// .storybook/main.js

module.exports = {
  stories: [],
  addons: [],
  staticDirs: ['../public/images'],
};

// Nav.stories.mdx
import {Nav} from './Nav'
import {Canvas, Meta, Story} from '@storybook/addon-docs'

<Meta title="micro/Nav" component={Nav} />

export const Template = (args) => <Nav {...args} />

# The Nav

Unauthenticated user

<Canvas>
  <Story name="nav-unauthenticated">{Template.bind({})}</Story>
</Canvas>

//Nav.js
import logo from '../../public/images/logo.svg'

export const Nav = () => {
  return(
    <img {...logo} alt='logo'/>
  )
}

徽标未出现在导航中

我有一个 API 密钥，需要它来访问 API 端点。在我的 Next.js 应用程序中，我将此密钥存储在下面，.env.local如下所示：

API_KEY=qwerty123

我在getStaticProps函数中使用 process.env 访问它：

API_KEY=qwerty123

当我尝试在生产中运行此程序时，我收到一条错误消息，指出 API 密钥无效。我知道 API 是正确的，因为当我在本地运行该项目时，API 数据会加载。

    "code": "API_KEY_INVALID",
    "message": "Your API key is not valid. Please get a new one at https://www.nps.gov/subjects/developer/get-started.htm"

我的问题是，我是否需要更改在getStaticProps生产构建的函数中调用 API 密钥的方式？

注意：我已确保将环境包含在 Amplify 控制台中。