gpt4 book ai didi

javascript - 更新 Redux 存储时,React 组件不会重新渲染

转载 作者:行者123 更新时间:2023-12-01 01:49:38 26 4
gpt4 key购买 nike

我正在尝试创建一个开关来收藏卡组件,以便它在我的Favorites.js组件中呈现。我正在使用 Redux 来存储状态,但是当我调度一个操作来添加或从存储中删除它们时,组件不会呈现。我想我正在改变数组的状态。

这是 reducer :

 export function rootReducer(state = [], action) {


switch(action.type) {
case 'ADD_FAVORITE':
return state.concat(action.data);
case 'SUB_FAVORITE':
return state.filter(state => state.name !== action.data.name);
default:
return state;
}
}

我尝试使用 Object.assign 创建一个新数组,但由于传递到我的状态的数据本身位于数组中,因此我无法使用 store.getState() 将它们映射到我的组件中。该数组变得嵌套在其自身内。

这是我运行 onClick 来调度操作的函数:

toggleFavorites(e) {
if
(store.getState().includes(this.props.data))
{
console.log(this.props.data.name + ' removed from favorites');
store.dispatch({type: 'SUB_FAVORITE', data: this.props.data});

}
else{

console.log(this.props.data.name + ' added to favorites');
store.dispatch({type: 'ADD_FAVORITE', data: this.props.data});
}

This.props.data 是通过引用 JSON 对象中的数组并将其映射到我的卡片组件来传递的

这是我正在渲染的卡片组件:

render() {
let {name, description, url , screenshot} = this.props.data;
return (
<div className="cardComponent">
<div className="CTA-container">
<div className="CTA-wrapper">
<div onClick={() => this.toggleFavorites(this.props.data)}className="CTA-icon"><IconComponent icon="favorite"/></div>
<a href={url} className="CTA-icon" target="_blank"><IconComponent icon="link"/></a>
</div>
</div>
<img src={screenshot} alt="" className="cardComponent_img"/>
<a href={url} className="cardComponent_name" target="_blank">{name}</a>
<p className="cardComponent_description">{description}</p>

</div>

我将这些卡片组件渲染到Favorites.js组件中,如下所示:

class Favorites extends Component {

constructor(props) {
super(props);
}
render() {

let cardComps = store.getState().map(data => {
return (
<CardComponent data = {data} />
)
})

return (

<div>

<div className="array-component">{cardComps}</div>

export default Favorites;

我对 React 和 Redux 相当陌生,所以我不确定我在设置组件时是否做错了什么。我只需要当用户在收藏夹中添加或删除该组件时重新渲染该组件。

最佳答案

Redux 会对更新状态的引用进行浅比较,并据此决定是否更新组件。

两者Array#concatArray#filter 返回具有相同引用元素的新数组。因此,状态比较返回false并且不会发生渲染

假设action.data是一个一维数组。这应该可行。

switch(action.type) {
case 'ADD_FAVORITE':
return [...state,action.data];
case 'SUB_FAVORITE':
return [...state.filter(state => state.name !== action.data.name)]
default:
return state;
}

关于javascript - 更新 Redux 存储时,React 组件不会重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51648153/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com