React Native开发中markedDates调用push方法出现TypeError问题求助

你报错的核心原因很直接：markedDates是普通JavaScript对象（用{}定义的键值对结构），而push()是数组的专属方法，对象根本没有这个方法，所以调用它会抛出"undefined is not a function"的错误。

要给markedDates添加新的日期标记，直接用对象的属性赋值语法即可，两种常用方式如下：

方式1：直接给对象添加属性（简单场景） #

替换你代码里的markedDates.push(...)，改成：

markedDates['2023-03-03'] = {marked: true, dotColor: 'blue'};

方式2：用对象展开运算符创建新对象（React状态管理场景推荐） #

如果后续你需要把markedDates作为React状态管理（比如用户交互后动态更新），要遵循不可变原则，用展开运算符生成新对象：

const updatedMarkedDates = {
  ...markedDates,
  '2023-03-03': {marked: true, dotColor: 'blue'}
};

修改后的完整代码示例 #

import React from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Calendar} from "react-native-calendars";
import {View, StyleSheet} from 'react-native';

function HomeScreen({navigation}) {
  var dateString = "";
  var markedDates = {
    '2023-02-01': {marked: true, dotColor: 'red'},
  }

  // 替换原push方法，直接添加新日期标记
  markedDates['2023-03-03'] = {marked: true, dotColor: 'blue'};
  
  return(
      <SafeAreaProvider>
         <View>
            <Calendar
              markedDates={markedDates}
              onDayPress={(day) => {
                
              }}
           />
         </View>
      </SafeAreaProvider>
  );
}

export default HomeScreen;

补充：React状态下的动态更新示例 #

如果需要在用户交互（比如点击日期）时动态修改标记，建议用useState管理状态，更新时保持不可变性：

import React, { useState } from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Calendar} from "react-native-calendars";
import {View, StyleSheet} from 'react-native';

function HomeScreen({navigation}) {
  const [markedDates, setMarkedDates] = useState({
    '2023-02-01': {marked: true, dotColor: 'red'},
  });

  return(
      <SafeAreaProvider>
         <View>
            <Calendar
              markedDates={markedDates}
              onDayPress={(day) => {
                // 点击日期时添加新标记
                setMarkedDates(prevState => ({
                  ...prevState,
                  [day.dateString]: {marked: true, dotColor: 'green'}
                }));
              }}
           />
         </View>
      </SafeAreaProvider>
  );
}

export default HomeScreen;

内容的提问来源于stack exchange，提问作者Beom