在 ReactJS 中声明 const 为未定义

Question

我正在使用 .find 方法在键值对数组中查找特定值：

import { useParams } from "react-router-dom";
const brands = [{ value: "Suzuki Jimny" },
{ value: "Land Cruiser" },
{ value: "BMW" }];

export default function OurBrands() {

    const { data } = useParams();
    const b = brands.find(brand => brand.value === data);

    return (
        <div className="m-8">
            <div className="flex flex-row">
                <div className="w-3/4">
                    <h2>{b.value}</h2>
                    <p>{b.info}</p>
                </div>
                <div className="w-1/4 flex-col">
                    <div className="h-[256px] w-full bg-orange-400"></div>
                    <div className="h-[256px] w-full bg-green-400"></div>
                </div>
            </div>
            <div>
                More information
            </div>
        </div>
    );
}

我做错了什么？也许是

brand.value === data 

还是我使用的方法不正确？

Answer 1

在 ReactJS（以及一般的 JavaScript）中，如果使用“const”声明变量但不为其赋值，则会遇到语法错误。这是因为“const”需要在声明时立即赋值。这是一个细分：

1. 需要立即分配：

   • 语法：'const 变量名=值；'
   • 当您使用“const”声明变量时，您是在告诉 JavaScript 该变量将保存一个常量值，这意味着对该值的引用无法重新分配。因此，您必须在声明时提供初始值。

2. 示例： '''javascript // 这会抛出语法错误 常量我的变量；

   //正确的方法 const myVariable = 未定义； // 这很好，因为您显式分配了“未定义” '''

3. 为什么会发生这种情况：

   • 'const' 表示引用不应更改的变量。由于引用是常量，JavaScript 要求您立即定义它。如果没有初始值，JavaScript 不知道要保持什么不变，这就是它抛出错误的原因。

4. 如果您最初想要未定义：

   • 如果您需要声明一个变量而不为其分配特定值，并且您打算稍后分配一个值，则应该使用“let”而不是“const”。

   '''javascript 让我的变量； // myVariable 最初未定义，但您可以稍后赋值。 '''

   • 或者，如果您想使用“const”，请显式分配“undefined”：

   '''javascript const myVariable = 未定义； // 现在它被定义为“未定义”。 '''

5.结论：

• 'const' 用于不应更改其引用的变量。必须立即对其进行初始化。如果您在声明时不知道该值，请考虑使用 'let' 或使用 'const' 显式将其设置为 'undefined'。