如何解决ReactJS - 传递参数以获取请求
以下是显示所有类别的 React 组件, 在这条路线 http://localhost:3000/categories
import React,{ useEffect,useState } from 'react';
import { useDispatch,useSelector } from "react-redux";
import { Link } from "react-router-dom";
// Material-UI core
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
// Local Components
import BodyWrapper from 'components/bodyWrapper';
import Spinner from 'components/progressAnimations/spinner';
import CategoryCard from 'components/categoryCard';
import { CARD1,CARD2,CARD3 } from '../../constants'; // images
import { useStyles } from './style';
function Categories(props) {
const classes = useStyles();
const loading = useSelector(state => state.categories.isLoading);
const categories = useSelector(state => state.categories.categories);
return (
<BodyWrapper spacing = "40px" containerWidth = "lg">
<h2>Categories</h2>
<Grid container spacing={4}>
{
!loading ?
categories.data[0].documents.map((category,index) => (
<Grid key={index} item xs={6} md={4} lg={3} >
<Link to = {`/categories/${category.name}`} style={{ textDecoration: "none" }}>
<CategoryCard image={ category.imageUrl || CARD2 } title={ category.name } />
</Link>
</Grid>
)) : (
<div className = { classes.spinner }>
<Spinner />
</div>
)
}
</Grid>
</BodyWrapper>
);
}
export default Categories;
当单击特定类别时,我想加载一个新组件并创建一个到服务器的 GET 请求,其 ID 为类别以加载与类别相关的所有数据。
http://localhost:3000/categories/Photographers
这是 API URL,我想通过 GET 请求发送“类别 ID”。
{{SERVER}}/api/vendor/getAll?page=1&limit=10&categories=5fdf4d9db1ecf930cd09331b
我想知道将类别 ID 传递给下一个组件的最佳方式。
解决方法
你可以这样做:
import React,{ useEffect,useState } from "react";
import axios from "axios";
const Categories = (props) => {
// we get something from Redux
const categories = ["a","b","c","d","e","f"];
const [currentCategory,setCurrentCategory] = useState(null);
return props.loading ? (
"Loading..."
) : (
<div>
<h2>Select category</h2>
{categories.map((category) => (
<div key={category} onClick={() => setCurrentCategory(category)}>
Category: {category}
</div>
))}
<div>current category is {String(currentCategory)}</div>
{currentCategory && <Category id={currentCategory} />}
</div>
);
};
const Category = ({ id }) => {
const [data,setData] = useState(null);
const url = "https://someurl.com";
useEffect(() => {
const fetchData = async () => {
const dataFromServer = await axios.get(`${url}/${id}`);
setData(dataFromServer);
};
fetchData();
},[id]);
return data ? (
<div>Render data here: {data}</div>
) : (
`Loading category ${id}...`
);
};
const App = () => {
return (
<div>
<Categories />
</div>
);
};
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。