您可以尝试使用活动元素的索引作为状态，而不是使用布尔值作为状态：

function Language() { 
  const [active, setActive] = useState(-1); // -1 represents no active element

  const changeStyle = (index) => {   
    setStyle(index);
  };

  return (
    <>
      <ul className="lang">
        {languages.map(({ code, name, country_code }, i) => ( // get index as i
          <li key={country_code}>
            <h4 onClick={() => {i18next.changeLanguage(code); changeStyle(i)}} className={active === i ? "cont" : "cont2"}>{name}</h4>
          </li>
        ))}
      </ul>
    </>
  );
}

然后，您将能够检查此li的索引是否与活动索引相同。

您可以将活动li的代码设置为状态值，并检查状态值是否等于li的代码值或任何其他唯一值。

function Language() {
  const [active, setActive] = useState('');      
  const changeStyle = (code) => setActive(code)

  return (
    <>
      <ul className="lang">
        {languages.map(({ code, name, country_code }) => (
          <li key={country_code}>
            <h4 
                onClick={()=>{
                  i18next.changeLanguage(code);
                  changeStyle(code)
                }} 
                className={active===code && "active" }>
                  {name}
            </h4>
          </li>
        ))}
      </ul>
    </>
  );
}