javascript - 如何在 React 中重新加载数组数据
问题描述
我是来自 Angular 的新反应。我想知道如何在 React 中重新加载数组列表。我想像在脚本中一样过滤 getVilles 的包含,在从位置重新加载时它显示我期望的正确值,但在 JSX 中它不会重新加载。请问如何正确操作。
这是我的数组: Concert.js
export const Concert = [
{
id: 1,
imgSource: "...",
artistName: "Artist Name",
tourName: "Tour Name",
date: "Date and hour",
place: "Aix-en-provence",
categorie : "Rock",
tarifs:{
to : "de",
at : "a"
}
},
{
id: 2,
imgSource: "...",
artistName: "Artist Name 2",
tourName: "Tour Name",
date: "Date and hour",
place: "Aix-en-provence",
categorie : "Elektro",
tarifs:{
to : "de",
at : "a"
}
},
{
id: 3,
imgSource: "...",
artistName: "Artist Name 2",
tourName: "Tour Name",
date: "Date and hour",
place: "Dunkerque",
categorie : "Elektro",
tarifs:{
to : "de",
at : "a"
}
},
{
id: 4,
imgSource: "...",
artistName: "Artist Name 2",
tourName: "Tour Name",
date: "Date and hour",
place: "Cannes",
categorie : "Elektro",
tarifs:{
to : "de",
at : "a"
}
},
{
id: 5,
imgSource: "...",
artistName: "Artist Name 2",
tourName: "Tour Name",
date: "Date and hour",
place: "Cannes",
categorie : "Elektro",
tarifs:{
to : "de",
at : "a"
}
},
{
id: 6,
imgSource: "...",
artistName: "Artist Name 6",
tourName: "Tour Name",
date: "Date and hour",
place: "Cannes",
categorie : "Elektro",
tarifs:{
to : "de",
at : "a"
}
},
];
这是显示每个数据的卡片组件:concert.component.ts
import { Link} from 'react-router-dom';
function ConcertComponent(props) {
//console.log("Ville filter = ", props.ville);
return <div className="card" style={{ width: '18rem' }}>
{/* <img src="..." className="card-img-top" alt="..."/> */}
<div className="card-body">
<h5 className="card-title">{ props.concertData.artistName }</h5>
<p className="card-text">{ props.concertData.categorie } </p>
<p className="card-text">{ props.concertData.place } </p>
<Link to="#" className="btn btn-primary">Reserver</Link>
</div>
</div>
}
export default ConcertComponent;
这是包含所有带有过滤器的数据的页面:ProgrammationView.js
export const getVilles = ["Aix-en-provence","Bourges","Cannes", "Dunkerque", "Echirolles"];
export const getCat = ["Pop", "Rock", "Elektro","Rap / Hip-Hop", "Soul / Funk", "Classique", "Dub / Reggae", "World"];
export const sortBy = ["Dates Croissante", "Dates décroissante", "A-Z", "Z-A"];
let getConcert = Concert;
const reloadFromPlace = (ville) =>
{
getConcert = Concert.filter(concert => concert.place === ville);
console.log("Ville change", getConcert);
}
const ProgrammationView = () => {
return (
<div className="App container">
<h1> Programmation </h1>
<div className="filter row">
<div className="col-md-12">
<div className="place row justify-content-md-left">
<div className="col-md-1 title">
<h5>Lieu</h5>
</div>
<div className="col-md-8 btn-group" role="group">
<button type="button" className="btn btn-light">Tous</button>
{
getVilles.map(ville => // !!!! Normally here it should display the filter values of getVilles, but it doesnt. Why ??
<button type="button" key={ville} onClick={()=> {reloadFromPlace(ville)}} className="btn btn-light">{ville}</button>
)
}
</div>
</div>
</div>
</div>
<div className="concert">
<div className="row listData justify-content-md-center">
{
getConcert.map(item =>
<React.Fragment key={item.id}>
<ConcertComponent concertData={item} key={item.id}></ConcertComponent>
</React.Fragment>
)
}
</div>
</div>
</div>
);
}
export default ProgrammationView;
解决方案
要在更改时重新渲染组件,您需要一个本地状态。如果useEffect
音乐会来自props
.
https://reactjs.org/docs/hooks-effect.html
这是本地状态(useState)Hook 的示例:考虑您的 Button onClick 处理程序:
button type="button" key={ville} onClick={()=> {reloadFromPlace(ville)}} className="btn btn-light">{ville}</button>
// And your read Method should do following:
const reloadFromPlace = (ville) =>
{
getConcert = Concert.filter(concert => concert.place === ville);
setConcert(getConcert); // This changes the local state, which will trigger re-render
console.log("Ville change", concert);
}
它正确调用了该reloadFromPlace
函数。但是要告诉你的组件,有些东西发生了变化,组件有一个本地状态,它不会自动改变。
使用useState
Method 保留本地状态参数:
const [concert, setConcert] = React.useState(Concert.slice(0, Concert.length); //add the Concert Array as a local state parameter
然后,更改您的 JSX 以使用本地状态参数concert
:
<div className="concert">
<div className="row listData justify-content-md-center">
{ concert.map(item =>
<React.Fragment key={item.id}>
<ConcertComponent concertData={item} key={item.id}></ConcertComponent>
</React.Fragment>
) }
</div>
</div>
最终的函数定义可能如下所示:
export const getVilles = ["Aix-en-provence", "Bourges", "Cannes", "Dunkerque", "Echirolles"];
export const getCat = ["Pop", "Rock", "Elektro", "Rap / Hip-Hop", "Soul / Funk", "Classique", "Dub / Reggae", "World"];
export const sortBy = ["Dates Croissante", "Dates décroissante", "A-Z", "Z-A"];
let getConcert = Concert;
const ProgrammationView = () => {
const [concert, setConcert] = React.useState(Concert.slice(0, Concert.length); //add the Concert Array as a local state parameter
const reloadFromPlace = (ville) => {
getConcert = Concert.filter(concert => concert.place === ville);
setConcert(getConcert); // This changes the local state, which will trigger re-render
console.log("Ville change", getConcert);
}
return (
<div className="App container">
<h1> Programmation </h1>
<div className="filter row">
<div className="col-md-12">
<div className="place row justify-content-md-left">
<div className="col-md-1 title">
<h5>Lieu</h5>
</div>
<div className="col-md-8 btn-group" role="group">
<button type="button" className="btn btn-light">Tous</button>
{
getVilles.map(ville => // !!!! Normally here it should display the filter values of getVilles, but it doesnt. Why ??
<button type="button" key={ville} onClick={() => { reloadFromPlace(ville) }} className="btn btn-light">{ville}</button>
)
}
</div>
</div>
</div>
</div>
<div className="concert">
<div className="row listData justify-content-md-center">
{
concert.map(item =>
<React.Fragment key={item.id}>
<ConcertComponent concertData={item} key={item.id}></ConcertComponent>
</React.Fragment>
)
}
</div>
</div>
</div>
);
}
export default ProgrammationView;
推荐阅读
- acumatica - 如何将插入操作添加到移动应用程序的网格行级别?
- python -
随时间创建交互变量后求解 Cox 比例风险 - c++ - 在这种情况下如何正确连接 std::strings ?[C++]
- mongodb - 如何创建第一个启用授权的 mongodb 用户?
- python - 使用 PyInstller 构建后的“例外:ScrollView 只接受一个小部件”
- css - 如何使用 flex-end 属性为元素添加边距?
- python-3.x - 在带有标题文本Python / bs4的动态类之后获取文本
- google-chrome - Chrome 上的 Cypress.io 出现“默认为 SameSite cookie”的问题
- vue.js - 为什么事件在同一个元素中只正确触发一次?
- sql - ORACLE SQL 我遇到了一个选择语句的问题,该语句应该显示每个分支的最大余额