Javascript 在reactjs中过滤api响应

我还没有反应过来。我正在使用react-redux调用Axios的API。我已使用

.get

成功获取结果。现在我想制作一个下拉式过滤器，在其中，如果选择了一个，则应显示该特定类型的结果。为了方便起见，我制作了一个后端，响应同时发送一个对象，即

类型

，可以是内部的，也可以是外部的。为了更清楚，答案如下所示

[
    {
        "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
    }
]

根据上面的结果，您可以看到我得到了两种类型的结果，即内部和外部。 在前端，我想做一个有选项的下拉列表

Internal
External

根据选择，我想显示用户选择的结果，例如，如果用户选择

Internal

，则只显示内部结果。否则，默认情况下，所有响应都应该像现在这样显示

我的.jsx文件如下所示。注释

过滤

将告诉您我迄今为止所做的尝试，但我对此一无所知。如何放置下拉列表，以便再次加载组件并显示所选结果。此外，在

return

中，我已经过滤出

结果。键入
put
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>
  );
}








函数onClickHandler（id）{
console.log（“调用详细信息产品”，id）；
详细产品（id）；
}
导出默认函数SingleSearchResult（道具）{
让结果=props.result；
日志（“道具单一搜索”，道具）；
常量bgColor=useState（“黑色”）；
//外塌
const[collapse，setCollapse]=useState（false）；
const toggle=（）=>setCollapse（！collapse）；
常量加载=（）=>；
const onClickHandlerTup=（）=>{
成功（“你喜欢这个产品”）；
};
const onClickHandlerDown=（）=>{
cogotashelper.warn（“您不喜欢此产品”）；
};
//过滤
让内部类型=this.props.result.filter（函数（类型））{
返回类型。类型==“内部”；
});
让外部类型=this.props.result.filter（函数（类型））{
返回类型。类型==“外部”；
});
返回(
{/*Loader Here ibox content*/}
{result.type==“内部”(
onClickHandler（result.productid）}
//onClickHandler（result.productid）
>
{result.title}

) : (
//尝试使用OnClick函数
{result.description}




)}
{/*排名*/}
{/*
访问了{result.rank}次
*/}
);
}
为了为数组中的每个项目呈现组件，您应该使用
.map（）
来除去数组并返回JSX元素。像这样：

data.map（项=>(
{item.title}
))

在这里面，如果
true
，您可以使用三元渲染一个组件，如果不是，则可以使用另一个组件，如下所示：

data.map（项=>(
item.type==='内部'？
{item.title}
:
{item.title}
))

如果要基于下拉列表的值进行筛选，可以像javascript中的任何数组一样进行筛选-
.filter（）
，并使用
.map（）
转换结果，如下所示：

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

显然，这是一个比您的代码更简单的示例，但其工作原理应该是相同的

工作演示：
道具。结果
数组正确吗？因此无法检查
result.type==“Internal”
。我猜您希望为数组中的每个项呈现一个组件，并基于其
类型
对吗？@MoshFeu
props.result
是我从api获得的json结果。它包含对象
type
，我用
result.type==“Internal”
引用它。是的，我想根据所选的
类型
右侧渲染/加载组件。因此没有
结果。键入
。你知道如何为数组中的每一项呈现一个组件吗？@MoshFeu我对这一点很陌生！我所知道的是，我们可以用用户
forEach
来做这个？太好了。谢谢你。但对于我来说，最让我困惑的是下拉列表的使用，当选择时，我希望获取该值并匹配是选择了
内部
，还是选择了
外部
，基于此，我希望完成您发送的这项工作。但是，我如何使用下拉列表获取值，然后进行匹配呢？在您的评论中，我更新了我的答案：）请查看..很高兴听到：）祝您好运！