Блог

Мой экран разделен на две зоны: левую зону и правую зону. Левая зона появляется всегда. Когда вы указываете на левую зону, она должна отображать правую зону. Как только отображается правильная зона, обе зоны должны отображать правильную зону. Но это работает не так, как ожидалось, правая зона исчезает при «попытке» указать на нее.

Проверьте демонстрацию ЗДЕСЬ

 export default function App() {
  const [pointOverLeftZone, setPointOverLeftZone] = useState(false);
  const [pointOverRightZone, setPointOverRightZone] = useState(false);

  const shouldDisplayRightZone = pointOverLeftZone || pointOverRightZone;

  return (
    <div className="App">
      <div
        className="zone light-cyan"
        onPointerOver={() => {
          if (!pointOverLeftZone) setPointOverLeftZone(true);
        }}
        onPointerOut={() => {
          if (pointOverLeftZone) setPointOverLeftZone(false);
        }}
      >
        <p>Point over here to display the right zone</p>
      </div>
      {shouldDisplayRightZone amp;amp; (
        <div
          className="zone light-yellow"
          onPointerOver={() => {
            if (!pointOverRightZone) setPointOverRightZone(true);
          }}
          onPointerOut={() => {
            if (pointOverRightZone) setPointOverRightZone(false);
          }}
        >
          <p>
            Once open the right zone, both zones should activate the display of
            this right zone, but the bug is here: when you mouse the move here
            it dissapear
          </p>
        </div>
      )}
    </div>
  );
}

  

Значение shouldDisplayRightZone зависит от значения pointOverLeftZone , pointOverRightZone поэтому вы должны сделать его независимым состоянием и переносить в useEffect и обновлять всякий раз, когда происходят изменения в pointOverLeftZone , pointOverRightZone

 const [shouldDisplayRightZone, setShouldDisplayRightZone] = useState(
  pointOverLeftZone || pointOverRightZone
);

useEffect(() => {
  setShouldDisplayRightZone(pointOverLeftZone || pointOverRightZone);
}, [pointOverLeftZone, pointOverRightZone]);
  

Разветвленный codesandbox

 import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [pointOverLeftZone, setPointOverLeftZone] = useState(false);
  const [pointOverRightZone] = useState(false);

  const shouldDisplayRightZone = pointOverLeftZone || pointOverRightZone;

  return (
    <div className="App">
      <div
        className="zone light-cyan"
        onPointerOver={() => setPointOverLeftZone(true)}
      >
        <p>Point over here to display the right zone</p>
      </div>
      {shouldDisplayRightZone amp;amp; (
        <div
          className="zone light-yellow"
          onPointerOut={() => setPointOverLeftZone(false)}
        >
          <p>
            Once open the right zone, both zones should activate the display of
            this right zone, but the bug is here: when you mouse the move here
            it dissapear
          </p>
        </div>
      )}
    </div>
  );
}
  

Что-то вроде этого?

  import React, { useState } from "react";
 import "./styles.css";

export default function App() {
const [pointOverLeftZone, setPointOverLeftZone] = useState(false);
 const [pointOverRightZone, setPointOverRightZone] = useState(false);
const [flag, setFlag] = useState(true);
const [int, setIni] = useState(false);
 const shouldDisplayRightZone = pointOverLeftZone || pointOverRightZone;

return (
<div className="App">
  {flag === true ? (
    <div
      className="zone light-cyan"
      onPointerOver={() => {
        if (!pointOverLeftZone) {
          setPointOverLeftZone(true);
        }
      }}
    >
      <p>Point over here to display the right zone</p>
    </div>
  ) : (
    <div>
      <div>right zone open</div>
      <p>
        Once open the right zone, both zones should activate the display of
        this right zone, but the bug is here: when you mouse the move here
        it dissapear
      </p>
    </div>
   )}

   {shouldDisplayRightZone amp;amp; (
     <div
      className="zone light-yellow"
      onPointerOver={() => {
        if (!pointOverRightZone) {
          setFlag(false);
          setPointOverRightZone(true);
        }
      }}
      onPointerOut={() => {
        if (pointOverRightZone) setPointOverRightZone(false);
      }}
    >
      <p>
        Once open the right zone, both zones should activate the display of
        this right zone, but the bug is here: when you mouse the move here
        it dissapear
      </p>
    </div>
   )}
 </div>
 );
 }
  

я изменил код в песочнице, вы можете проверить это там.Дайте мне знать, если это сработает