更新存储后,React 中的 useEffect 不更新组件 [英] useEffect in React not update component after update store
问题描述
我不明白为什么 React 不更新我的对象.在另一个组件中通过调度更新状态.在此(在下面的代码中)中,mapStateToProps 类别中的代码正在更改(控制台日志显示另外一个类别).但是组件没有重新渲染,虽然在 useEffect 的组件中我使用了 props.categories.元素中的事件 console.log 不运行
const LeftSidebar = (props: any) =>{console.log('props.categories 改变后不渲染')useEffect(() => {props.dispatch(getCategories())}, [props.categories]);const addCategoryHandler = (categoryId: number) =>{props.history.push('/category/create/' + categoryId)};返回 (<div className='left-sidebar'><标志/><MenuSidebar category={props.categories} onClickAddCategory={addCategoryHandler}/>
);};函数 mapStateToProps(state: State) {const 类别 = state.category &&状态.类别.列表;console.log('这个类别改变了,但 LeftSidebar 没有改变')控制台日志(类别)返回{类别};}导出默认连接(mapStateToProps)(LeftSidebar);
我想如果我更新状态,则根据此状态响应更新组件.它应该如何工作?它应该如何工作?可能有用,添加类别的项目不是父或子,而是邻居我的减速机
import {CATEGORIES_GET, CATEGORY_CREATE} from "../actions/types";导出默认函数 (state={}, action: any) {开关(动作.类型){案例CATEGORIES_GET:返回 {...状态,列表:action.payload};案例 CATEGORY_CREATE:返回 {...状态,列表:action.payload};默认:返回状态;}}
感谢您解决问题.所有问题都出在不可变数据中.我使用了灯具,没有正确复制数组
import {CATEGORIES_GET, CATEGORY_CREATE} from "./types";从../../fixtureData"导入{categoryMenuItems as items};从../../types"导入{NewCategory};让 categoryMenuItems = 项目;//我的错误,我使用了不可变的值.不为状态使用固定装置))让id = 33;导出函数 getCategories() {返回 {类型:CATEGORIES_GET,有效负载:类别菜单项}}导出函数 createCategory(newCategory: NewCategory) {身份证++常量类别 = {标题:newCategory.name,身份证:身份证};//错误我使用相同的数组,而不是像 let clonedCategoryMenuItems = [...categoryMenuItems] 那样克隆categoryMenuItems.push(category);返回 {类型:CATEGORY_CREATE,有效负载:类别菜单项}}
状态不使用fixtures,使用真实的api :)
也许你的状态不是一成不变的.在您的减速器中使用扩展运算符添加新项目
<代码>{列表: [...状态.列表,添加类别]}
代替
state.list.push( addedCategory)
I don't understand why React not update my object. In another component through the dispatch I update the state. In this (in code below) code in mapStateToProps categories are changing (console log show one more category). But component not rerender, although in component in useEffect I use props.categories. Event console.log in element does not run
const LeftSidebar = (props: any) => {
console.log('not render after props.categories changed')
useEffect(() => {
props.dispatch(getCategories())
}, [props.categories]);
const addCategoryHandler = (categoryId: number) => {
props.history.push('/category/create/' + categoryId)
};
return (
<div className='left-sidebar'>
<Logo/>
<MenuSidebar categories={props.categories} onClickAddCategory={addCategoryHandler}/>
</div>
);
};
function mapStateToProps(state: State) {
const categories = state.category && state.category.list;
console.log('this categories changes, but LeftSidebar not changing')
console.log(categories)
return { categories };
}
export default connect(mapStateToProps)(LeftSidebar);
I thought if i update state, react update components dependent on this state. How should it work? how should it work? It may be useful, the item that adds the category is not a parent or child, it is a neighbor My reducer
import {CATEGORIES_GET, CATEGORY_CREATE} from "../actions/types";
export default function (state={}, action: any) {
switch (action.type) {
case CATEGORIES_GET:
return {...state, list: action.payload};
case CATEGORY_CREATE:
return {...state, list: action.payload};
default: return state;
}
}
Thanks for solving problem. All problem was in inmutable data. I used fixtures, and not copied properly array
import {CATEGORIES_GET, CATEGORY_CREATE} from "./types";
import {categoryMenuItems as items} from "../../fixtureData";
import {NewCategory} from "../../types";
let categoryMenuItems = items; // My mistake, I used not immutable value. Not use fixtures for state))
let id = 33;
export function getCategories() {
return {
type: CATEGORIES_GET,
payload: categoryMenuItems
}
}
export function createCategory(newCategory: NewCategory) {
id++
const category = {
title: newCategory.name,
id: id
};
// MISTAKE I use same array, not cloned like let clonedCategoryMenuItems = [...categoryMenuItems]
categoryMenuItems.push(category);
return {
type: CATEGORY_CREATE,
payload: categoryMenuItems
}
}
Not use fixtures for state, use real api :)
Maybe your state not is inmutable. In your reducer use spread operator to add new items
{
list: [
...state.list,
addedCategory
]
}
Instead of
state.list.push(addedCategory)
这篇关于更新存储后,React 中的 useEffect 不更新组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!