我無法通過這個（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>