使用reactjs对api响应A-Z/Z-A进行排序
我试图根据用户选择的是A-Z还是Z-A对api响应进行排序。我使用React-Redux和axios调用和获取api 我的代码在下面 搜索操作如下所示 search.action.js 搜索减速器 类似地，jsx代码如下所示使用reactjs对api响应A-Z/Z-A进行排序,reactjs,Reactjs,我试图根据用户选择的是A-Z还是Z-A对api响应进行排序。我使用React-Redux和axios调用和获取api 我的代码在下面 搜索操作如下所示 search.action.js 搜索减速器 类似地，jsx代码如下所示 import React, { useState, useEffect } from "react"; import Rating from "./rating"; import "./test.css"; import { Spinner, Collapse, Card,
import React, { useState, useEffect } from "react";
import Rating from "./rating";
import "./test.css";
import { Spinner, Collapse, Card, CardBody } from "reactstrap";
import { detailsProduct } from "../../../_actions/product.details.action";
import { ProductDetails, DoctorProductLocation } from "../../../locations";
import { Link, Redirect } from "react-router-dom";
import { setLoading } from "../../../_actions/search.action";
import Loader from "react-loader-spinner";
import Select from "react-select";
// import { fetchProducts } from "../../../_actions/search.action";
// import { detailsProduct } from "../../../_actions/product.details.action";
function onClickHandler(id) {
console.log("calling Details Product", id);
detailsProduct(id);
}
export default function SingleSearchResult(props) {
console.log("PROPS FROM SINGLE SEARCH", props);
let result = props.result;
//Collapse For External
const [collapse, setCollapse] = useState(false);
const toggle = () => setCollapse(!collapse);
const loading = () => <Spinner color="success" />;
return (
<div className="row">
<div className="s130">
<div className="col-lg">
<div className="container">
<Loader
type="ThreeDots"
color="#00BFFF"
height="100"
width="100"
timeout={1000}
></Loader>
{result.type === "Internal" ? (
<Link
value={result.productid}
to={DoctorProductLocation.path}
onClick={() => onClickHandler(result.productid)}
>
<h3>{result.title}</h3>
</Link>
) : (
<a onClick={toggle} target="_blank">
<h3 style={{ color: "blue" }}>{result.title}</h3>
</a>
)}
{result.type == "Article" ? <p>by {result.author}</p> : ""}
<Rating rating={result.rating} />
</div>
{result.type === "Internal" ? (
<Link
className="iUh30"
to={DoctorProductLocation.path}
onClick={() => onClickHandler(result.productid)}
>
<a className="iUh30">{result.url}</a>
</Link>
) : (
//Try With OnClick Function
<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: "blue" }}
target="_blank"
>
Subscribe
</a>
</CardBody>
</Card>
<br></br>
</Collapse>
)}
{/* <p>{ result.description } <a type="button" class="btn btn-default" href="{ result.url }">See more</a></p> */}
<p className="rank">Visited {result.rank} times</p>
{/* <br /> */}
</div>
</div>
</div>
);
}
import React from "react";
import queryString from "query-string";
import { connect } from "react-redux";
import SearchResult from "./search-results";
import { results } from "../../../_actions/data/result";
import Select from "react-select";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import Loader from "react-loader-spinner";
import SearchBar from "./search-bar";
import { fetchProducts, searchProduct } from "../../../_actions/search.action";
import { useSelector, useDispatch } from "react-redux";
class SearchResultContainer extends React.Component {
componentDidMount() {
const query = queryString.parse(this.props.location.search).q;
this.props.searchProduct(query);
this.props.fetchProducts(query);
}
componentWillReceiveProps(nextProps) {
console.log("nextProps", nextProps);
// if (nextProps.query !== this.props.query) {
// this.setState({ query: nextProps.query });
// return this.searchRepositories(nextProps.query);
// }
}
render() {
const { loading } = this.props;
console.log("PROS", this.props);
const companies = [
{
label: "Example",
value: "https://www.example.de"
},
{
label: "Orange",
value: "https://www.orange.com"
},
{
label: "Apple",
value: "https://www.apple.com"
}
];
const Order = [
{
label: "A-Z"
},
{
label: "Z-A"
}
];
return loading ? (
<div class="row"></div>
) : (
<React.Fragment>
<div className="row">
<div className="col-sm-2" />
<div className="col-sm-8">
<SearchBar />
<Select options={companies}></Select>
<Select placeholder="Order..." options={Order}></Select>
<br></br>
<div class="row">
<Loader
type="ThreeDots"
color="#00BFFF"
height="100"
width="100"
timeout={100}
></Loader>
<SearchResult />
</div>
</div>
<div className="col-sm-2" />
</div>
</React.Fragment>
);
}
}
const mapStateToProps = state => ({
loading: state.product.loading
});
export default connect(mapStateToProps, { searchProduct, fetchProducts })(
SearchResultContainer
);
您是说您正在尝试对响应A-Z/Z-A进行排序。您在代码中的何处尝试进行排序？只需在有效负载中添加带方向的排序操作-在减速机中排序-记住返回新对象，而不是就地排序。。。。redux中的详细信息？为什么？？？@evgeniklepilin请检查编辑。我在我使用的地方放了更多的代码
import React, { useState, useEffect } from "react";
import Rating from "./rating";
import "./test.css";
import { Spinner, Collapse, Card, CardBody } from "reactstrap";
import { detailsProduct } from "../../../_actions/product.details.action";
import { ProductDetails, DoctorProductLocation } from "../../../locations";
import { Link, Redirect } from "react-router-dom";
import { setLoading } from "../../../_actions/search.action";
import Loader from "react-loader-spinner";
import Select from "react-select";
// import { fetchProducts } from "../../../_actions/search.action";
// import { detailsProduct } from "../../../_actions/product.details.action";
function onClickHandler(id) {
console.log("calling Details Product", id);
detailsProduct(id);
}
export default function SingleSearchResult(props) {
console.log("PROPS FROM SINGLE SEARCH", props);
let result = props.result;
//Collapse For External
const [collapse, setCollapse] = useState(false);
const toggle = () => setCollapse(!collapse);
const loading = () => <Spinner color="success" />;
return (
<div className="row">
<div className="s130">
<div className="col-lg">
<div className="container">
<Loader
type="ThreeDots"
color="#00BFFF"
height="100"
width="100"
timeout={1000}
></Loader>
{result.type === "Internal" ? (
<Link
value={result.productid}
to={DoctorProductLocation.path}
onClick={() => onClickHandler(result.productid)}
>
<h3>{result.title}</h3>
</Link>
) : (
<a onClick={toggle} target="_blank">
<h3 style={{ color: "blue" }}>{result.title}</h3>
</a>
)}
{result.type == "Article" ? <p>by {result.author}</p> : ""}
<Rating rating={result.rating} />
</div>
{result.type === "Internal" ? (
<Link
className="iUh30"
to={DoctorProductLocation.path}
onClick={() => onClickHandler(result.productid)}
>
<a className="iUh30">{result.url}</a>
</Link>
) : (
//Try With OnClick Function
<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: "blue" }}
target="_blank"
>
Subscribe
</a>
</CardBody>
</Card>
<br></br>
</Collapse>
)}
{/* <p>{ result.description } <a type="button" class="btn btn-default" href="{ result.url }">See more</a></p> */}
<p className="rank">Visited {result.rank} times</p>
{/* <br /> */}
</div>
</div>
</div>
);
}
import React from "react";
import queryString from "query-string";
import { connect } from "react-redux";
import SearchResult from "./search-results";
import { results } from "../../../_actions/data/result";
import Select from "react-select";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import Loader from "react-loader-spinner";
import SearchBar from "./search-bar";
import { fetchProducts, searchProduct } from "../../../_actions/search.action";
import { useSelector, useDispatch } from "react-redux";
class SearchResultContainer extends React.Component {
componentDidMount() {
const query = queryString.parse(this.props.location.search).q;
this.props.searchProduct(query);
this.props.fetchProducts(query);
}
componentWillReceiveProps(nextProps) {
console.log("nextProps", nextProps);
// if (nextProps.query !== this.props.query) {
// this.setState({ query: nextProps.query });
// return this.searchRepositories(nextProps.query);
// }
}
render() {
const { loading } = this.props;
console.log("PROS", this.props);
const companies = [
{
label: "Example",
value: "https://www.example.de"
},
{
label: "Orange",
value: "https://www.orange.com"
},
{
label: "Apple",
value: "https://www.apple.com"
}
];
const Order = [
{
label: "A-Z"
},
{
label: "Z-A"
}
];
return loading ? (
<div class="row"></div>
) : (
<React.Fragment>
<div className="row">
<div className="col-sm-2" />
<div className="col-sm-8">
<SearchBar />
<Select options={companies}></Select>
<Select placeholder="Order..." options={Order}></Select>
<br></br>
<div class="row">
<Loader
type="ThreeDots"
color="#00BFFF"
height="100"
width="100"
timeout={100}
></Loader>
<SearchResult />
</div>
</div>
<div className="col-sm-2" />
</div>
</React.Fragment>
);
}
}
const mapStateToProps = state => ({
loading: state.product.loading
});
export default connect(mapStateToProps, { searchProduct, fetchProducts })(
SearchResultContainer
);