React与react-bootstrap项目中JavaScript语法错误求助

问题分析 #

你遇到的Parsing error: Unexpected token, expected "}"错误，直接原因有两个：

1. 在JSX表达式中使用forEach遍历数组，forEach无返回值，且你在语句末尾加了多余的分号，导致JSX解析失败。
2. countryIsSelected未声明，属于未定义变量。

另外还有两处逻辑问题需要修正，避免后续报错：

• selectedCountry初始为对象，但赋值为字符串类型的e.target.value，导致后续Object.keys判断逻辑失效。
• 列表元素缺少React要求的key属性。

修复后的完整代码 #

import "bootstrap/dist/css/bootstrap.css";
import { Dropdown, DropdownButton } from "react-bootstrap";

import countries from "./../countries.json";

const SearchBar = () => {
    let selectedCountry = "";
    let countryIsSelected = false;

    const selectCountryHandler = (e) => {
        selectedCountry = e.target.value;
        countryIsSelected = selectedCountry !== "";
        console.log(selectedCountry);
    };


    return (
        <>
            <h3>Select your filters</h3>
            <div className="bordered-component">
                <DropdownButton
                    id="countryDropdown"
                    variant="light"
                    title="Select a Country"
                    onSelect={selectCountryHandler}
                >
                    {countries.map((country, ix) => (
                        <Dropdown.Item key={ix} eventKey={country.id}>
                            {country.name}
                        </Dropdown.Item>
                    ))}
                </DropdownButton>
            </div>
        </>
    );
};

export default SearchBar;

关键修复点 #

• 替换forEach为map：map会返回由Dropdown.Item组成的数组，JSX可直接渲染该数组；forEach仅执行遍历操作，无返回值，无法用于JSX渲染列表。
• 移除多余分号：原代码中forEach语句后的分号破坏了JSX表达式的结构，这是触发语法错误的直接原因。
• 添加key属性：React要求列表中的每个元素必须有唯一的key，这里用数组索引ix作为临时方案，若country.id唯一，也可直接用country.id。
• 修正变量声明与类型：声明countryIsSelected变量，同时调整selectedCountry的初始值类型为字符串，让后续的选中判断逻辑生效。

内容的提问来源于stack exchange，提问作者flyfisher1952