我无法通过这个（React，react-bootstrap）Array.map（）JavaScript syntaqx 错误

Question

我正在使用反应和反应引导程序。 我整天都在看这段代码，但似乎无法修复它。 我收到语法错误：第 30:26 行：解析错误：意外标记，应为“}”(30:26)

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

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

const SearchBar = () => {
    let selectedCountry = {};

    const selectCountryHandler = (e) => {
        selectedCountry = e.target.value;
        countryIsSelected = Object.keys(selectedCountry).length > 0;
        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.forEach((country, ix) => {
                            <Dropdown.Item eventKey={country.id}>{country.name}</Dropdown.Item>
                        });
                    }
                </DropdownButton>
            </div>
        </>
    );
};

export default SearchBar;

我可能只是看它太久了，它很简单，但我没有看到。

Answer 1

forEach function 需要是带有return语句的 map：

<DropdownButton id='countryDropdown' variant='light' title='Select a Country' onSelect={selectCountryHandler}>
    {countries.map((country, ix) => {
        return <Dropdown.Item eventKey={country.id}>{country.name}</Dropdown.Item>;
    })}
</DropdownButton>