尝试将React组件传递给对象，但一直得到一个不可序列化的值错误

Question

我理解错误的含义，但是尽管添加了一个对象来克服错误，它仍然存在。

注意:我正在使用Redux Toolkit

这是我的抽屉Redux文件:

type InitialState =  {
isOpen: Boolean,
shoppingCartItems: {[key:string]:any},
}
const initialState: InitialState = {
isOpen: false, 
shoppingCartItems: {},
}
export const drawer = createSlice({
name:"drawer", 
initialState,
reducers:{
addToCart: (state: any, action: any) => {
state.shoppingCartItems[action.payload.props.productName] = action.payload;
}
}
})
export const {addToCart} = drawer.actions;

ProductName应该是对象和操作中的键。有效载荷应该是我的组件。组件是这样的:

<Button onClick={() => addToShoppingCart(<Product productName={productName} />)}  >Add </Button>

产品<是我想在redux商店中存储的内容，并且addToShoppingcart函数看起来像这样:>

function addToShoppingCart(item: any){
dispatch(addToCart(item))
}

我知道不建议在传递给数组时使用不可序列化的值，但是从我给出的示例中是否有一种方法可以避免错误?

我试过了:

• 根据不同帖子的建议从数组切换到对象
• 将我的组件存储在const值中

两个都不工作。

Answer 1

这里有两个问题——一个是概念上的问题，一个是技术上的问题。

概念上的问题是在React和Redux中，状态是data，由普通JS对象和数组组成。像<MyComponent>这样的JSX元素不是"data"

JSX元素应该在呈现组件时计算，并且呈现应该基于实际的当前状态。

技术问题是Redux Toolkit专门检查这样的错误，并告诉您不这样做:)

因此，正确的答案应该是调度一个包含这个item本身(或项目的ID)的操作。然后，在组件中读取这些数据，并根据该数据在组件中渲染<Product>。