Фильтрация ответа API в reactjs

Question

Я новичок, чтобы реагировать. Я использую реагировать с избыточностью для вызова API с Ax ios. Я успешно получил результат, используя .get. Теперь я хочу сделать выпадающий фильтр, в котором, если он выбран, должен показывать результат этого конкретного типа. Для большего удобства я создал бэкэнд, в котором ответ также отправляет объект, то есть type, который может быть внутренним или внешним. Для большей ясности ответ выглядит следующим образом.

[
    {
        "id": 0,
        "title": "TestProductForAzure",
        "description": null,
        "owner": "Seeded Company",
        "link": null,
        "url": "http://localhost:54729/api/product/3",
        "type": "Internal",
        "rank": 0,
        "productid": 3
    },
    {
        "id": 0,
        "title": "Official example",
        "description": null,
        "owner": null,
        "link": "/search/product?url=https://support.example.com/en-ae",
        "url": "https://support.example.com/en-ae",
        "type": "External",
        "rank": 0,
        "productid": 0
    },
    {
        "id": 0,
        "title": "Example1 Support",
        "description": null,
        "owner": null,
        "link": "/search/product?url=https://support.example.com/",
        "url": "https://support.example.com/",
        "type": "External",
        "rank": 0,
        "productid": 0
    }
]

С приведенным выше результатом вы можете видеть, что я получаю 2 типа результатов: внутренний и внешний. На веб-интерфейсе я хочу сделать выпадающий список, который имеет параметры

Internal
External

и на основе выбора я хочу показать результаты, которые выбрал пользователь, например, если пользователь выбирает Internal, только внутренний результат должен быть показано на рисунке. В противном случае по умолчанию все ответы должны отображаться как сейчас.

Мой файл .jsx выглядит следующим образом. Комментарий Filtering расскажет вам, что я пробовал до сих пор, но я ничего не понимаю в этом. Как можно поставить выпадающий список, который позволяет компоненту снова загружаться и показывать выбранные результаты. Более того, в return я уже отфильтровываю result.type, выставляя Internal синего и External красного.

function onClickHandler(id) {
  console.log("calling Details Product", id);
  detailsProduct(id);
}

export default function SingleSearchResult(props) {


  let result = props.result;
  console.log("Props Single Search", props);
  const bgColor = useState("black");


  //Collapse For External
  const [collapse, setCollapse] = useState(false);

  const toggle = () => setCollapse(!collapse);

  const loading = () => <Spinner color="success" />;

  const onClickHandlerTup = () => {
    cogoToastHelper.success("You liked this Product");
  };

  const onClickHandlerDown = () => {
    cogoToastHelper.warn("You disliked this Product");
  };

  //Filtering
    let Internal_type = this.props.result.filter(function(types) {
    return types.type === "Internal";
  });

  let External_type = this.props.result.filter(function(types) {
    return types.type === "External";
  });



  return (
    <div className="row">
      <div className="s130">
        <div className="col-lg">
          <div className="container">
            <div className=""></div>
            {/* Loader Here ibox-content*/}
            {result.type === "Internal" ? (
              <Link
                value={result.productid}
                to={DoctorProductLocation.path}
                onClick={() => onClickHandler(result.productid)}
                //onClickHandler(result.productid)
              >
                <h3 style={{ color: "#1a0dab" }}>
                  {result.title}
                  <hr></hr>
                </h3>
              </Link>
            ) : (
              //Try With OnClick Function
              <a onClick={toggle} target="_blank">
                <h3 style={{ color: "RED" }}>
                  {result.title}
                  <hr></hr>
                </h3>
              </a>
            )}
            <p className="p1">{result.description}</p>
          </div>

          {result.type === "Internal" ? (
            <Link
              className="iUh30"
              to={DoctorProductLocation.path}
              onClick={() => onClickHandler(result.productid)}
            >
            </Link>
          ) : (
            <Collapse isOpen={collapse}>
              <Card style={{ maxWidth: "100%" }}>
                <CardBody>
                  Source:
                  <a className="iUh30" href={result.url} target="_blank">
                    <a>{result.url}</a>
                  </a>
                </CardBody>
              </Card>
              <Card style={{ maxWidth: "100%" }}>
                <CardBody>
                  <a
                    href={result.url + "subscribe"}
                    style={{ color: "#1a0dab" }}
                    target="_blank"
                  >
                    Subscribe
                  </a>
                  <p>{result.description} </p>
                  <GoThumbsup
                    className="col-4"
                    onClick={onClickHandlerTup}
                  ></GoThumbsup>
                  <GoThumbsdown
                    className="col-4"
                    onClick={onClickHandlerDown}
                  ></GoThumbsdown>
                </CardBody>
              </Card>

              <br></br>
            </Collapse>
          )}

          {/* RANKING */}
          {/* <p className="rank">Visited {result.rank} times</p> */}
        </div>
      </div>
      <Footer></Footer>
    </div>
  );
}

Answer 1

Чтобы отобразить компонент для каждого элемента в массиве, вы должны использовать .map(), который кроме массива и возвращает элемент JSX. Как это:

data.map(item => (
    <div>
      {item.title}
    </div>
))

Внутри этого вы можете использовать троичный для рендеринга одного компонента, если true, и другого, если нет, Как это:

data.map(item => (
    item.type === 'Internal' ?
    <div className="internal">
      {item.title}
    </div> :
    <div className="external">
      {item.title}
    </div>
))

Если вы хотите фильтровать на основе по значению выпадающего списка вы можете фильтровать как любой массив в javascript - .filter() и конвертировать результат, используя .map(), например:

.filter(item => !this.state.filter || item.type === this.state.filter)

Это, очевидно, более простой пример, чем ваш код, но он должен работать так же.

Рабочая демонстрация: https://stackblitz.com/edit/react-yldai7?file=index.js