Какая роль ...props в HOC в данном коде?

Question

[JavaSscriptNoob]

Всем привет , у меня есть такой HOC :

import React, { useState } from "react";
import ErrorMessage from "@components/ErrorMessage/ErrorMessage";
export const WithErrorApi = (View) => {
  return (props) => {
    const [errorApi, setErrorApi] = useState(false);
    const [isLoading, setisLoading] = useState(true);
    return (
      <>
        {errorApi ? (
          <ErrorMessage />
        ) : (
          <>
            <View
              setErrorApi={setErrorApi}
              setLoader={setisLoading}
              isLoading={isLoading}
              {...props}
            />
          </>
        )}
      </>
    );
  };
};

И есть такой компонент который его использует :

const PeoplePage = ({ setErrorApi, setLoader, isLoading }) => {
  const query = useQueryParams();
  const queryPage = query.get("page"); 
  const [people, setPeople] = useState(null);
  const [prevPage, setPrevPage] = useState(null);
  const [nextPage, setNextPage] = useState(null);
  const [counterPage, setCounterPage] = useState(1);
  const getResource = async (url) => {
    const res = await getApiResource(url);
    if (res) {
      const peopleList = res.results.map(({ name, url }) => {
        const id = getPeopleId(url);
        const img = getPeopleImg(id);
        return {
          id,
          name,
          img,
        };
      });
      setPeople(peopleList);
      setNextPage(res.next);
      setPrevPage(res.previous);
      setCounterPage(getPeoplePageId(url));
      setLoader(false);
      setErrorApi(false);
    } else {
      setErrorApi(true);
    }
  };
  useEffect(() => {
    getResource(API_PEOPLE + queryPage);
  }, []);
  return (
    <>
      <PeopleNavigation
        getResource={getResource}
        prevPage={prevPage}
        nextPage={nextPage}
        counterPage={counterPage}
      />
      {isLoading ? <Loader /> : ""}
      {people !== null && <PeopleList people={people} />}
    </>
  );
};

PeoplePage.propTypes = {
  setErrorApi: PropTypes.func,
};
export default WithErrorApi(PeoplePage)

Весь вопрос в том , какая роль ...props в моём хоке . А именно : 1) Зачем нам нужна эта функция return (props) =>// там остальной код .... Почему бы нам сразу не вернуть компонент с нужными нам данными 2) откуда берутся эти props если мы их нигде не указывали и какая их роль в данном коде 3) что лежит ...props в коде компонента

<View
              setErrorApi={setErrorApi}
              setLoader={setisLoading}
              isLoading={isLoading}
              {...props} // что тут лежит и зачем это нужно если из-вне у нас нету никаких пропсов ?
            />

Код не мой,взят для ознакомления с темой хоков . Спасибо !

Answer 1

[Aetae]

const PeoplePageWithErrorApi = WithErrorApi(PeoplePage)

<PeoplePageWithErrorApi foo="bar"> 
// props = {foo: bar} 
// внутри PeoplePage props {
//  foo: 'bar', 
//  setErrorApi: setErrorApi из WithErrorApi, 
//  setLoader: setLoader из WithErrorApi, 
//  isLoading: isLoading из WithErrorApi
//}

Очевидно же, нет?

Comments

[JavaSscriptNoob]

хм,спасибо , к сожалению для меня это не было очевидным :( но теперь я вкурил это :)

[JavaSscriptNoob]

И ещё хотел спросить если в PeoplePageWithErrorApi не передавать пропсы то по сути нам функция return (props) => {....}внутри хока получется не нужна ? можно сразу вернуть компонент с тем что нам нужно ?

[Aetae]

JavaSscriptNoob, нет. (props) => {....} это не просто "функция", это новый компонент, тот который собственно PeoplePageWithErrorApi.
Простая функция это сам HOC - WithErrorApi.

Если пробрасывать props не хочешь - их можно убрать, но такой HOC будет бесполезен для любого компонента у которого есть props отличные от тех, что этот HOC заполняет сам.

[JavaSscriptNoob]

Aetae, Понял спасибо!