Reactjs React Hook[useState]：更新状态并重新渲染视图

经验：我完全是React的初学者

我想学习的内容：Hooks（

useState

）-但我不知道如何更新状态并用它重新渲染视图。据我所知，如果更新后的状态与上次类似，React不会重新启动视图。。。在谷歌搜索之后，我试图复制状态并以某种方式更新它，但我遗漏了一些东西，我不知道是什么

我在项目中尝试做什么：当用户从下拉列表中选择一个地区时，我有一个要筛选的国家列表。这是在选择发生时触发的函数，以及我希望解释我尝试执行的操作的注释：

    const change = event => {
        //copy the `data` state (which has a list of all the countries)
        let newData = [...data];
        console.log(newData);

        //filter through the countries list to get only those with the selected region
        let filtered = newData.filter(obj => obj.region === event.target.value);
        console.log(filtered);

        //change the countries list with the filtered one, and rerender the view
        setData([data, newData]);
        console.log(data);
    };

您可以找到有问题的文件和代码（向下滚动以进入

change

功能）

从“Fitler by region下拉列表”中选择一个区域

请参阅控制台中的错误/输出

---

您正在将状态更新为对象数组，最后一项将是筛选列表

相反，传入一个包含已筛选国家/地区的数组

请注意，第二次选择其他地区时，您的州将丢失，因为您正在修改整个国家/地区集合

setData（data.filter（obj=>obj.region===event.target.value））

那么你能做些什么来避免失去国家

我们可以根据所选区域过滤列表

在我更改代码的地方添加了注释

导出默认函数CountriesList（）{
const[data，setData]=useState（[]）；
const[distinctreons，setdistinctreons]=useState（[]）；
const[loading，setLoading]=useState（true）；
//添加了跟踪选定区域的状态
常量[selectedRegion，setSelectedRegion]=useState（“”）；
useffect（（）=>{
CountriesAPI（）。然后（res=>{
空载（res）；
设置加载（假）；
});
}, []);
const onLoad=dataList=>{
setData（…数据，数据列表）；
getRegions（数据列表）；
};
const getRegions=dataList=>{
让区域=[]；
dataList.map（dataItem=>
dataItem.region.length？区域.push（dataItem.region）：“”
);
让regionsFiltered=regions.filter(
（项目，索引，arr）=>arr.indexOf（项目）==索引
);
SetDistincRegions（…DistincRegions，RegionFiltered）；
};
常量渲染加载=（）=>{
返回装载。。。；
};
//现在我们只需要更新选定的区域
常量更改=事件=>{
setSelectedRegion（event.target.value）；
};
常量renderData=（数据列表，distinctregionItem）=>{
if（dataList&&dataList.length）{
返回(
按区域过滤
//添加显示全部
全部展示
{distinctregionItem.map（项=>{
返回(
{item}
);
})}
//根据selectedRegion筛选数组，然后呈现列表。
//如果selectedRegion为空，则显示所有
{数据列表
.过滤器(
country=>！selectedRegion | | country.region===selectedRegion
)
.map（国家=>(
))}
);
}否则{
返回未找到的项目；
}
};
返回加载？renderLoading（）：renderData（数据、区域）；
}