时间戳

首页 > 解决方案 > 在 React Native 中获取“undefined is not and object”

javascript - 在 React Native 中获取“undefined is not and object”

问题描述

所以我想要的是有一个 TouchableOpacities 列表，它代表下一周的几天。这个想法是，当我按下任何一天时，它的样式会在“选中”和“未选中”之间变化

带有几天所需按钮的卡片

我的理解是（而且我是一个新手），当我想要改变样式时强制组件重新渲染，我必须改变状态。而这个状态应该是在父组件中，其代码如下：

import React, { useState, useEffect } from "react";

import DaySelector from "./DaySelector";

const WeekList = () => {
  const [activeDays, setActiveDays] = useState([]);

  function onClick(index) {
    let days = [...activeDays];
    let day = days[index];
    days[index].active = !day.active;
    setActiveDays(days);
  }

  useEffect(() => {
    let date = new Date();
    let tempArr = [];

    for (let i = 0; i < 7; i++) {
      let temp = new Date();
      temp.setDate(date.getDate() + i);
      tempArr.push({
        key: temp.getDay(),
        day: temp,
        active: true,
        onPress: () => onClick(i),
      });
    }

    setActiveDays(tempArr);
  }, []);

  return (
    <>
      {activeDays.map((day) => (
        <DaySelector
          key={day.key}
          day={day.day}
          active={day.active}
          onClick={day.onPress}
        />
      ))}
    </>
  );
};

export default WeekList;

但是，我不断收到标题中的错误：“TypeError: undefined is not an object (evalating 'day.active')”，指的是 'onClick' (let day = days[index];) 函数的第 10 行，其工作是切换对象的“活动”属性，然后将其传播到组件，一个简单的三元运算符使用它来选择要应用的样式。

问题是，我已经 console.logged 退出程序，它要么工作（但实际上并没有改变 DaySelector 组件的样式），要么崩溃，尽管日志说“day”确实是一个对象。

简而言之，我不知道自己做错了什么......一开始看起来很简单......在此先感谢您的帮助！

标签： javascriptarraysreact-nativestate

解决方案

在对象状态上设置 onPress 函数对我来说似乎很可疑。所以我在没有它的情况下重写了它并且它有效。

  /**
   * Define the behavior of the component here.
   * Keep on data on the state.
   */
  const onClick = (index: number) => {
    // Update a field in an object in a list _without mutating_ the objects.
    setActiveDays([
      ...activeDays.slice(0, index),
      { ...activeDays[index], active: !activeDays[index].active },
      ...activeDays.slice(index + 1),
    ]);
  };

// Then

{activeDays.map((day: any, i: number) => (
 <DaySelector
  key={day.key}
  day={day.day}
  active={day.active}
  onClick={() => onClick(i)}
 />
))}

推荐阅读