Question

我正在尝试了解此问题。为什么只有在我再次单击时，状态（在这种情况下才是国家）才在执行函数之后才更新setCountry？在此示例中，当我选择一个国家/地区，然后在第一个console.log中的addCountry（）函数中单击“添加国家/地区”以显示良好状态并显示当前选择的国家/地区，但是第二个具有国家/地区状态的console.log则显示前一个国家/地区。当然，当{country}作为回报时，显然会显示当前情况。所以我的问题是我应该在第二个console.log中正确使用udpate coutry吗？

import React, { useState} from "react";

const Country = () => {
  const [country, setCountry] = useState([]);

  const countries = ["Poland", "England", "Germany", "USA"];
  const showCountries = countries.map((country) => <option>{country}</option>);
  const addCountry = () => {
    const selectCountry = document.getElementById("selectCountry").value;
    console.log(selectCountry); //There is current country
    setCountry(selectCountry);
    console.log(country); //There is previous country
  };

  return (
    <>
      <select id="selectCountry">{showCountries}</select>
      <button onClick={addCountry}>Add Country</button>
      <div>{country}</div>
    </>
  );
};

export default Country;

为什么在执行函数时useState不是更新状态

0 个答案: