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

Question

这实际上似乎相当简单，似乎我接近得到它的权利，但它不能正常工作-仍在学习!:))

这是关于这个任务的一些上下文，它似乎在那里工作。

我正在从国家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

例如，当你第一次选择"欧洲"时，你过滤掉了所有不是欧洲的东西，当你选择另一个国家时，假设你选择"极地"，你过滤掉了"欧洲"。因为它过滤掉了所有不"极"的东西。

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