javascript - 当 redux 状态更新时,React 组件不更新
问题描述
我正在触发一个动作来执行一些切换功能,但是,即使 redux 状态是,我的反应组件也没有重新渲染
const Countries = ({ countries, toggleCountry }) => (
<div>
<h4> All Countries </h4>
<div className="container">
{countries.map((country, index) => (
<div
key={index}
className={`countryContainer ${country.visited ? 'visited' : ''}`}
>
<img src={country.flag} alt="countryFlag" />
<p className="countryName"> {country.name} </p>
<button onClick={() => toggleCountry(country.name)}>
{country.visited ? 'undo' : 'visited'}
</button>
</div>
))}
</div>
</div>
);
const mapStateToProps = ({ countries }) => ({
countries
});
const mapDispatchToProps = dispatch =>
bindActionCreators(
{
toggleCountry
},
dispatch
);
export default connect(
mapStateToProps,
mapDispatchToProps
)(Countries);
当我单击此按钮时,它会正确切换到 redux 状态,但组件不会重新渲染以显示新按钮标签或更改类名
这是我的减速机:
常量初始状态 = []
export default(state = initialState, action) => {
switch(action.type){
case 'UPDATE_INITIAL_COUNTRIES':
return state.concat(action.countries)
case 'UPDATE_COUNTRY_VISITED':
return state.map(country => (
country.name === action.name ? {...country, visited: !country.visited} : country
))
default:
return state;
}
}
和我的动作创造者
export const toggleCountry = countryName => {
return dispatch => {
dispatch({ type: 'UPDATE_COUNTRY_VISITED', countryName })
}
}
解决方案
动作期望action.name
,但接收action.countryName
问题就在这里
export const toggleCountry = countryName => {
return dispatch => {
dispatch({ type: 'UPDATE_COUNTRY_VISITED', countryName })
}
}
使固定:
export const toggleCountry = name => {
return dispatch => {
dispatch({ type: 'UPDATE_COUNTRY_VISITED', name })
}
}
推荐阅读
- python - 将 Amazon Lightsail 中的 crontab 任务设置为 EST
- spring-boot - Spring Data Neo4j:无法在配置的最长时间内从池中获取连接
- node.js - 使用 chai-http 和 Jest 进行测试时,如何从我的 api 返回响应
- kedro - 整个 Kedro 管道的并行性
- android - 适用于 Android 10 的简单报警应用程序。如何通过服务打开屏幕
- google-sheets - Google 表格:MIN() 返回 #DIV/0!错误
- php - GitLab PHP docker 映像 - 您的系统中缺少请求的 PHP 扩展 gd
- jquery - 如何设置ajax的返回
- xml - 如何使用 NIFI 将 XML 文件转换为 CSV
- node.js - 如何在定义变量中包含定义的内容?