类型错误：无法访问属性 Symbol.iterator，状态 [action.payload.savedVideos] 未定义

问题描述

我在使用 redux 时遇到问题。我正在开发一个应用程序，您可以在其中保存有关 YouTube 视频的注释。一切正常，但是当我开始添加“ADD_ITEM”操作时，每次在我的减速器中执行此操作时都会出现相同的错误。我的错误是：TypeError: can't access property Symbol.iterator,state[action.payload.savedVideos] is undefined。我正在使用连接方法和函数 mapdispatchToProps 似乎很好，所以问题可能出在减速器或动作创建器中。这是我在减速器中添加项目的功能： `

 const reducer = (state = initialState,action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,[action.payload.savedVideos]: [...state[action.payload.savedVideos],action.payload.item],};

这是我的动作创建者：

 export const addItem = (itemContent,savedVideos) => {
  const getId = () => `_${Math.random().toString(36).substr(2,9)}`;

  return {
    type: 'ADD_ITEM',payload: {
      savedVideos,item: {
        id: getId(),...itemContent,},};
};

和我的初始状态：

const initialState = {
  saves: [
    {
      id: 1,title: 'Hello meow',created: '18 may 2018',link: 'https://www.youtube.com/watch?v=-QmyosHh-kU',content: 'Nowy film gargamela!',{
      id: 2,link: 'https://www.youtube.com/watch?v=-QmyosHa-kU',content: 'Nowy film!',{
      id: 3,link: 'https://www.youtube.com/watch?v=-QmyosHy-kU',content: 'Nowy film gorgonzoli!',{
      id: 4,{
      id: 5,],};

解决方法

https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#creating-the-root-reducer

假设savedVideos来自initialState，当你添加视频时，你正在添加以下对象，并且你想添加到你的initialState（又名初始存储），你不需要传递{{1 }} 到动作和减速器。

savedVideos

你的行为可以是..

{
      id: 1,title: 'Hello meow',created: '18 may 2018',link: 'https://www.youtube.com/watch?v=-QmyosHh-kU',content: 'Nowy film gargamela!',},

你的减速机可以

 export const addItem = (itemContent,savedVideos) => {
  const getId = () => `_${Math.random().toString(36).substr(2,9)}`;

  return {
    type: 'ADD_ITEM',payload: {
        id: getId(),...itemContent,};
};

,

我想解释错误

“类型错误：无法访问 Symbol.iterator 属性，状态 [action.payload.savedVideos] 未定义”

const reducer = (state = initialState,action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,[action.payload.savedVideos]: [...state[action.payload.savedVideos],action.payload.item],};

您在减速器中实际执行的是从变量更新属性名称。 属性名称周围的方括号表示它是一个变量。

属性名称是 action.payload.savedVideos 的值。但这不是有效的属性名称，因为 action.payload.savedVideos 是 array（Symbol.iterator）。

您不需要动态属性名称，因为您总是在更新属性 saves。正如@Someone Special 所解释的那样，您也不需要在操作中包含现有的 savedVideos，因为您已经可以从状态访问它们。

const reducer = (state = initialState,saves: [...state.saves,};