从下拉菜单中选择值并将 setCountries() 设置为所选值 - React JS

Question

这实际上看起来相当简单，似乎我已经接近正确但它无法正常工作 - 仍在学习！ :))

This 是有关此任务的一些上下文，它似乎在那里工作。

我正在从国家 REST API 获取数据，并且正在使用 const [countries, setCountries] = useState([]);

现在我有一个下拉菜单，我想在其中使用所选值显示国家/地区，该值是区域列表中的一个区域。

<form>
    <select
        name="regions"
        id="inputRegion"
        onChange={filterByRegion}
    >
        <option value="Africa">Africa</option>
        <option value="Americas">Americas</option>
        <option value="Asia">Asia</option>
        <option value="Oceania">Oceania</option>
        <option value="Polar">Polar</option>
    </select>
</form>

const filterByRegion = (e) => {
        handleSubmit(e.target.value);
        e.preventDefault();
    };

    function handleSubmit(value) {
        const filteredByRegionCountries = countries.filter(
            (country) => country.region === value
        );
        setCountries(filteredByRegionCountries);

在区域按钮本身我调用onChange={filterByRegion}

选择一个区域后，它会正确显示数据，但在您尝试使用另一个区域后，它根本不会显示任何国家/地区。我认为这与setCountries(filteredbyRegionsCountries)?

有关

为什么setCountries 没有正确更新，即使我们说应该使用handleSubmit() 函数选择的任何区域进行更新？

有人有什么见解吗？谢谢，提前谢谢你！

Answer 1

通过使用

countries.filter((country) => country.region === value);

您过滤掉所有没有所选国家/地区名称的国家/地区。 请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter 参考。

例如，当您第一次选择“欧洲”时，您会过滤掉除欧洲以外的所有内容；当您选择另一个国家/地区时，假设您选择了“极地”，您也会过滤掉“欧洲”，因为它会过滤剔除所有非“极地”的东西。

您可以尝试在每次更改后将国家/地区数组注销到控制台。