miliko mikoyan

Как вариант можно использовать такой хак:

<span itemProp="price" {...{ content: '10.00' }}>10</span>

иногда удобно определять свойства в переменной:

const spanProps = {
  itemProp: 'price',
  content: '10.00',
};

return (
  <span {...spanProps}>10</span>
);

Насколько понял вашу задачу, вы хотите вынести Header и рендерить под ним разные страницы. Это можно сделать, например, так:

const Amasia = () => (
  <div>Amasia</div>
);

const Product = ({ match }) => (
  <div>
    Page number: {match.params.page}
  </div>
);

const Header = () => (
  <header>
    <nav>
      <Link to="/">Amasia</Link>
      <Link to="/Mens/Hat/1">Product</Link>
    </nav>
    <div>Logo</div>
    <div>FormSearch</div>
    <div>ButSearch</div>
  </header>
);

const App = () => (
  <>
    <Header />
    <main>
      <Switch>
        <Route exact path="/" component={Amasia} />
        <Route exact path="/Mens/Hat/:page" component={Product} />
      </Switch>
    </main>
  </>  
);

const rootElement = document.getElementById("root");

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  rootElement,
);

Потому что this.request(id) возвращает или faceProductList[][] или faceProductList[].

А array.filter(({title}) => title.includes(valueSearch)) однозначно обрабатывает данные как faceProductList[] и не учитывает faceProductList[][].

Можно сделать

public async handler(id: string, valueSearch: string) { 
        await this.request(id)
          .then((array: faceProductList[]) => { 
            ...

для того чтоб ошибка ушла.

Но проблема неоднозначности останется и однажды вылезет в виде бага.

На вашем месте я бы сделал как-то так:

public async request(id: string): Promise<faceProductList[][]> {
  const res = await fetch(`${this.url}${id}`);
  const resArr: faceProductList[] | faceProductList[][]  = await res.json();
  if (resArr.length === 0) {
    return resArr;
  }

  if (Array.isArray(resArr[0])) {
    return resArr;
  }

  return [resArr];
}

не могу гарантировать что это заработает сразу, возможно прийдётся подпилить. Но направление мысли должно быть понятным.

Плюс этого подхода - вы будете избавлены от проверки на "а что именно вернула request, faceProductList[] или faceProductList[][] ?" при каждом чихе.

https://www.youtube.com/watch?v=V6DB6M3Nf58
Это замечательный ответ и он проверено рабочий но я бы все равно советовал бы подключить библиотеку и запрашивать данные с помощью ее функций

Ошибка линтера, так ка активно правило react-hooks/exhaustive-deps
1. Вам следует использовать useEffect, вместо useMemo.
2. Если вы используете react router, то объект match меняется при обновлении history, даже при передаче тех же параметров и правильно передавать сами параметры. Например:

useEffect(() => {
  doSomething();
}, [match.params.id]);

с чем это связано

с тем же с чем и:

let s: string;

s = 182;

Исправить можно, например, так:

const [prod, setProd] = useState<FakeProductList | null>(null);

if (!prod) {

}

return (/* ... */);

Обратите внимание, что интерфейсы принято называть с большой буквы, а слово fake, пишется с буквой k.
Атрибут readonly - лишнее.

Если вы используете react-router-dom, то надо использовать именно тот экземпляр history, который использует ваш роутер.

import React, { FC, useEffect } from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';

interface OwnProps {
  error: string;
}

type Props = OwnProps & RouteComponentProps<any>;

const HandlerErr: FC<Props> = ({ error, history }) => {
  useEffect(() => {
   const timeout = setTimeout(() => {
     history.push(`/`);
   }, 2000);
 
   return () => { 
     clearTimeout(timeout);
   };
  }, [error]);

  return (
    <>
      <div>{error}</div>
      <div>Contact site administrator</div>
    </>
  );
};

export default withRouter(HandlerErr);

itemScope
itemType
Ну, ты понял

Речь в ошибке про хуки. У вас хендлер для изменения категории начинается с use...
переименуйте его в setCategory

let x = "COTiynkTfM & Length = 1000251jink56516156" Finti: Ginjoko ";

это какая-то неправильная строка, кавычки непарные

const x = "Categories=All&Search=Filus";

const parseQueryString = str => str.split('&').reduce((acc, el) => {
  const [key, value] = el.split('=');
  acc[key] = value;
  return acc;
}, {});

const params = parseQueryString(x);

console.log(params); // { Categories: "All", Search: "Filus" }

const values = Object.values(params);

console.log(values); // [ "All", "Filus" ]

Вы передаете вторым аргументом в useEffect пустой массив. Это значит, что функция колбек будет вызвана только при монтировании компонента. Вам следует передавать в массив второго аргумента match.url, тогда колбек будет вызываться после монтирования и каждый раз при изменении url.

const Hat = ({ match }) => {
  // ...
  useEffect(() => {
    fetch(`https://foo0022.firebaseio.com//male/hat.json`)
      .then(res => res.json())
      .then(setArrProd);
  }, [match.url]);
  // ...
}

Шаг 1. Изменяем роутер:

<Switch>
  <Route path={"/"} exact render={() => <div>'100'</div>} />
  <Route path={"/male/hat"} exact component={ProductsList} />
  <Route path={"/male/hat/:to"} exact component={ProductDetails} />
</Switch>

Шаг 2. Пишем компонент для детализации:

const ProductDetails = ({ match }) => {
  const { to } = match.params;
  const [state, setState] = useState({ isFetching: true, hat: null });
  const { isFetching, product } = state;  

  useEffect(() => {
    (async () => {
      await fetch(`https://foo0022.firebaseio.com//male/hat.json`)
        .then(res => res.json())
        .then(data => {
          const product = data.find(item => item.to === to);
          setState({ isFetching: false, product });
        });
    })();
  }, []);
  
  if (isFetching) return <div>...Loading</div>;

  if (!product) return <div>404: Product not found</div>;

  return (
    <div>
      <h1>{product.title}</h1>
      <h2>{product.price}</h2>
    </div>
  );
}

Шаг 3. Изменяем компонент списка:

const ProductsList = () => {
  const [state, setState] = useState({ isFetching: true, products: [] });
  const { isFetching, products } = state;

  useEffect(() => {
    (async () => {
      await fetch(`https://foo0022.firebaseio.com//male/hat.json`)
        .then(res => res.json())
        .then(data => setState({ isFetching: false, products: data });
    })();
  }, []);
  
  if (isFetching) return <div>...Loading</div>;
  
  return (
    <ul>
      {products.map(({ to, title }) => (
          <li key={to}>
            <Link to={`/male/hat/${to}`}>{title}</Link>
          </li>
      ))}
    </ul>
  );
};

Вызов useCallback(fn, deps) эквивалентен useMemo(() => fn, deps)
Вся разница в дополнительной обертке, которую не придется писать при использовании useCallback, если надо возвращать меморизированный колбек.

с большой буквы

Это не символы это называется лигатуры https://www.youtube.com/watch?v=PRMQ7bFK3L4

А что вас смущает? У вас функция возвращает union тип. Значит там либо одно, либо другое. То есть набор полей у результата - это пересечение множества полей Mansion и House. В пересечении нет поля butlers.

Если будете вручную приводить к типу as Mansion как говорит 0xD34F можете нарваться на runtime ошибку. TS вам все верно говорит.

Вам нужно определиться, что делает ваша функция:
- возвращаяет одно из двух - тогда она может вернуть House, а там действительно нет butlers
- возвращает House и дополняет его butlers равным 10? Тогда возможно вам вообще нужен новый тип.

Если вы хотите вернуть что-то, что одновременно и Mansion и House используйте &:

function getProperty() : ( Mansion & House) {
...

Такой код читается как "вернуть объект который одновременно и Mansion и House". При этом в типе будет объединение множеств полей Mansion и House

P. S. если Mansion подвид House - можно использовать extends:

interface House {
    bedrooms: number,
    bathrooms: number
}
interface Mansion extends House {
    butlers: number
}