Javascript 如何在React中重新加载数组数据

我是新的反应，来自角度。 我想知道如何在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;

从'react router dom'导入{Link}；
功能组件（道具）{
//console.log（“Ville filter=”，props.Ville）；
返回
{/*  */}
{props.concertData.artistName}
{props.concertData.categorie}
{props.concertData.place}
保护
}
导出默认组件；

这是一个包含所有数据的页面：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;

export const getVilles=[“普罗旺斯的艾克斯”、“布尔日”、“戛纳”、“敦刻尔克”、“埃奇罗尔斯”]；
export const getCat=[“流行乐”、“摇滚乐”、“电子乐”、“说唱/嘻哈乐”、“灵魂/恐惧”、“古典乐”、“配乐/雷鬼音乐”、“世界”]；
出口成本排序=[“牛角包日期”、“牛角包日期”、“A-Z”、“Z-A”]；
让getConcert=音乐会；
const reloadFromPlace=（ville）=>
{   
getConcert=Concert.filter（Concert=>Concert.place==ville）；
console.log（“Ville change”，getConcert）；
}
常量程序视图=（）=>{
返回(
程序设计
代替；场所，处所
图斯
{
map（ville=>/！！通常在这里它应该显示getVilles的过滤器值，但是它没有。为什么？？
{reloadFromPlace（ville）}className=“btn btn light”>{ville}
)
}
{
getConcert.map（项=>
)
}
);
}
导出默认程序视图；

要在发生更改时重新呈现组件，您需要一个本地状态。如果音乐会来自

道具

，您也可以使用

useffect

挂钩。

下面是本地状态（useState）钩子的一个示例： 考虑一下你的Button onClick Handler：

button type=“button”key={ville}onClick={（）=>{reloadFromPlace（ville）}}className=“btn btn light”>{ville}
//您的读取方法应执行以下操作：
const reloadFromPlace=（ville）=>
{   
getConcert=Concert.filter（Concert=>Concert.place==ville）；
setConcert（getConcert）；//这会更改本地状态，从而触发重新渲染
console.log（“维尔变化”，音乐会）；
}

它正确地调用了

reloadFromPlace

函数。但是为了告诉组件，某些东西发生了变化，组件有一个本地状态，它不会自动改变

使用

useState

方法保留本地状态参数：

const[concert，setConcert]=React.useState（concert.slice（0，concert.length）；//将concert数组作为本地状态参数添加

然后，将JSX更改为使用本地状态参数

concert

：

{concert.map（项=>
) }

最终的函数定义可能如下所示：

export const getVilles=[“普罗旺斯的艾克斯”、“布尔日”、“戛纳”、“敦刻尔克”、“埃奇罗尔斯”]；
export const getCat=[“流行乐”、“摇滚乐”、“电子乐”、“说唱/嘻哈乐”、“灵魂/恐惧”、“古典乐”、“配乐/雷鬼音乐”、“世界”]；
出口成本排序=[“牛角包日期”、“牛角包日期”、“A-Z”、“Z-A”]；
让getConcert=音乐会；
常量程序视图=（）=>{
const[concert，setConcert]=React.useState（concert.slice（0，concert.length）；//将concert数组添加为本地状态参数
const reloadFromPlace=（ville）=>{
getConcert=Concert.filter（Concert=>Concert.place==ville）；
setConcert（getConcert）；//这会更改本地状态，从而触发重新渲染
console.log（“Ville change”，getConcert）；
}
返回(
程序设计
代替；场所，处所
图斯
{
map（ville=>/！！通常在这里它应该显示getVilles的过滤器值，但是它没有。为什么？？
{reloadFromPlace（ville）}className=“btn btn light”>{ville}
)
}
{
concert.map（项目=>
)
}
);
}
导出默认程序视图；

重新渲染组件时需要副作用。这里是指向状态挂钩文档的链接：