javascript - 为什么我不能在React / Redux中索引我的对象？ TypeError：无法读取未定义的属性“ 1”(Why Can't I index my object in React/Redux? TypeError: Cannot read property '1' of undefined)

Question

I am currently working on a personal project where I am attempting to create a meal planner table.

(我目前正在一个个人项目中尝试创建一个饮食计划表。)

I am currently using React/Redux to build my app and management my state respectively.

(我目前正在使用React / Redux分别构建我的应用程序和管理状态。)

I feel like I'm almost done except for this really strange counter-intuitive step I'm having right now.

(我觉得我几乎完成了，除了我现在正在执行的这非常奇怪的违反直觉的步骤。)

I am currently attempting to iterate over a global redux tableState object that holds the state for my table.

(我目前正在尝试遍历保存表状态的全局redux tableState对象。)

Now since my table and table state is defined as an object with the schema(See below), I can't understand why I can't index each item via tableState[mealtime][index] .

(现在，由于我的表和表状态被定义为具有架构的对象（请参见下文），所以我不明白为什么我无法通过tableState[mealtime][index]为每个项目tableState[mealtime][index] 。)

I keep getting the error that TypeError: Cannot read property '0' of undefined .

(我不断收到TypeError: Cannot read property '0' of undefined 。)

I understand this as my object being null, but why?

(我将此理解为我的对象为null，但是为什么呢？)

Furthermore, if I do tableState['breakfast'][1] , I actually see in the console the value I expect to receive( 'Select' ).

(此外，如果我执行tableState['breakfast'][1] ，我实际上会在控制台中看到期望接收的值（ 'Select' ）。)

What's going on here?

(这里发生了什么？)

Why is the browser throwing this error when in the console I am able to index the array just as expected?

(当我在控制台中能够按预期索引数组时，为什么浏览器会抛出此错误？)

/// Defined in seperate file
const tableInitState: ITableInitState = {
 tableState: {
   breakfast: [
     'Select',
     'Select',
     'Select',
     'Select',
     'Select',
     'Select',
     'Select'
   ],
   lunch: [
     'Select',
     'Select',
     'Select',
     'Select',
     'Select',
     'Select',
     'Select'
   ],
   dinner: [
     'Select',
     'Select',
     'Select',
     'Select',
     'Select',
     'Select',
     'Select'
   ]
 }
};

/// Defined in seperate file
const renderRows = () => {
   console.log(tableState['breakfast'][1]);
   return mealTimes.map((mealTime: string, _) => {
     return (
       <TableRow key={mealTime}>
         <TableCell>{mealTime}</TableCell>
         {daysofWeek.map((value: string, index: number) => {
           console.log(`mealTime is: ${mealTime}, the index is ${index}`);
           const currentMeal = tableState['breakfast'][1];
           return (
             <TableCell size="small" key={value}>
               <MealOptionsList
                 mealtime={mealTime}
                 tableIndex={index}
                 currentMeal={currentMeal}
               />
             </TableCell>
           );
         })}
       </TableRow>
     );
   });
 };```

  ask by Jared Rieger translate from so

Answer 1

等待大神答复