Przekazywanie propsów do komponentu <Outlet/>

Witam, mam taki kod komponentu rodzica. Komponent ten przekazuje komponentowi <Outlet/> wartość nameMaterial. Przy wywołaniu console log przed przekazaniem wartość jest poprawna. W React Dev Tools rowniez pokauzje ze komponent Outlet otrzymal poprawna wartosc nameMaterials. Przy wywolaniu console log w komponencie Outlet jednak wartosc nameMaterial pokazuje ze jest undefined. Czy ktos wie co moze byc powodem czegos takiego?

function Materials() {
  const { data, isLoading, error } = useApi("/api/przedmiot/all");
  const load = useHideContainer(false);
  const [nameMaterials, setNameMaterials] = useNameMaterials("");

  return (
    <MaterialsPage>
      <UserInfo />
      <InfoTab title={`${nameMaterials}`} />
      <TitleMaterials />
      {console.log(nameMaterials)}
      <Outlet title={`${nameMaterials}`} />
      {load && (
        <MaterialsContainer>
          {isLoading && <Loader />}
          {error ? (
            <Error />
          ) : (
            data?._embedded.przedmiotModelList.map((obj) => (
              <MaterialItem
                name={obj.nazwa}
                key={obj.id}
                setNameMaterials={setNameMaterials}
              />
            ))
          )}
        </MaterialsContainer>
      )}
    </MaterialsPage>
  );
}

Poniżej załączam kod komponentu Outlet :

function SingleMaterial({ title }) {
  const [displayDescription, setDisplayDescription] = useState(false);
  console.log(title);
  return (
    <div className="w-[90%] mx-auto mt-10">
      <MaterialSingleDescription
        setDisplayDescription={setDisplayDescription}
      />
      {displayDescription ? (
        <DescriptionSubject setDisplayDescription={setDisplayDescription} />
      ) : (
        <>
          <MaterialSingleItem num={1} />
          <MaterialSingleItem num={2} />
          <MaterialSingleItem num={3} />
          <MaterialSingleItem num={4} />
          <MaterialSingleItem num={5} />
          <MaterialSingleItem num={6} />
          <MaterialSingleItem num={7} />
        </>
      )}
    </div>
  );
}

Może hook useNameMaterials lub inny fragment kodu jest zbudowany na useRef? Wtedy przy złym użyciu zmiana nameMaterials może nie powodować ponownego renderowania wszystkich komponentów.

Xarviel napisał(a):

Może hook useNameMaterials lub inny fragment kodu jest zbudowany na useRef? Wtedy przy złym użyciu zmiana nameMaterials może nie powodować ponownego renderowania wszystkich komponentów.

Jest zbudowany na useState, komponent <InfoTab/> korzysta z tego samego stanu i w tym komponencie propsy przekazują się dobrze

Właśnie, bo tam useNameMaterials jest, a nie useState, nawet nie zauważyłem.

Ogólnie ten kod to taka zgadywanka, być może problem jest w tym kodzie, co wkleiłeś, być może gdzie indziej.

• Czego dotyczy kod SingleMaterial (i czemu określiłeś to słowem Outlet?)
• Jak jest zaimplementowany useNameMaterials?
• zamiast console.log podczas rendera, spróbuj to wyświetlić normalnie w HTML i zobacz, czy dalej jest błąd (możliwe, że przy ponownym renderingu komponentu się poprawnie wyświetli)
• jak wygląda komponent MaterialItem?

LukeJL napisał(a):

Właśnie, bo tam useNameMaterials jest, a nie useState, nawet nie zauważyłem.

Ogólnie ten kod to taka zgadywanka, być może problem jest w tym kodzie, co wkleiłeś, być może gdzie indziej.

• Czego dotyczy kod SingleMaterial (i czemu określiłeś to słowem Outlet?)
• Jak jest zaimplementowany useNameMaterials?
• zamiast console.log podczas rendera, spróbuj to wyświetlić normalnie w HTML i zobacz, czy dalej jest błąd (możliwe, że przy ponownym renderingu komponentu się poprawnie wyświetli)
• jak wygląda komponent MaterialItem?

• Korzystam z React Router i dlatego SingleMaterial to mój Outlet ( dopiero z React Routerem zaczynam)

• export default function useNameMaterials(init) {
  const [nameMaterials, setNameMaterials] = useState(init);
  const location = useLocation();
  
  useEffect(
    function () {
      const currentPath = location.pathname;
      if (currentPath === "/materials") {
        setNameMaterials("Materials");
      }
    },
    [location.pathname]
  );
  return [nameMaterials, setNameMaterials];
  }
  

`
Z tego hooka korzysta komponent <InfoTab/> w którym propsy są odczytywane w prawidłowy sposób.

• Próbowałem i również pokazuje wartość undefined

szym68on napisał(a):

LukeJL napisał(a):

Właśnie, bo tam useNameMaterials jest, a nie useState, nawet nie zauważyłem.

Ogólnie ten kod to taka zgadywanka, być może problem jest w tym kodzie, co wkleiłeś, być może gdzie indziej.

• Czego dotyczy kod SingleMaterial (i czemu określiłeś to słowem Outlet?)
• Jak jest zaimplementowany useNameMaterials?
• zamiast console.log podczas rendera, spróbuj to wyświetlić normalnie w HTML i zobacz, czy dalej jest błąd (możliwe, że przy ponownym renderingu komponentu się poprawnie wyświetli)
• jak wygląda komponent MaterialItem?

• Korzystam z React Router i dlatego SingleMaterial to mój Outlet ( dopiero z React Routerem zaczynam)

• export default function useNameMaterials(init) {
  const [nameMaterials, setNameMaterials] = useState(init);
  const location = useLocation();
  
  useEffect(
    function () {
      const currentPath = location.pathname;
      if (currentPath === "/materials") {
        setNameMaterials("Materials");
      }
    },
    [location.pathname]
  );
  return [nameMaterials, setNameMaterials];
  }
  

`
Z tego hooka korzysta komponent <InfoTab/> w którym propsy są odczytywane w prawidłowy sposób.

• Próbowałem i również pokazuje wartość undefined

function MaterialItem({ name, setNameMaterials }) {
  const randomNum = Math.floor(Math.random() * colors.length);
  const textRef = useRef(null);

  function handleTextFromLink() {
    const text = textRef.current.textContent;
    setNameMaterials(text);
  }

  return (
    <div className=" w-[350px] shadow-lg  rounded-lg border-opacity-50">
      <div
        style={{ backgroundColor: `${colors[randomNum]}` }}
        className={` w-[350px] h-[130px] rounded-lg cursor-pointer`}
      ></div>
      <NavLink to="Przedmiot" onClick={handleTextFromLink}>
        <h5 className="py-5 px-4 cursor-pointer text-lg" ref={textRef}>
          {name}
        </h5>
      </NavLink>
    </div>
  );
}

Doczytałem, że w kontenerze <Outlet/> w react router nie możemy używać propsów tylko przekazujemy za pomocą context. Teraz już jest wszystko ok. Dzięki za poświęcony czas