Next.js React报错：Objects are not valid as a React child，日期格式化求助

问题根源 #

• pegaDia函数返回的是对象{ dia, n }，React无法直接渲染对象类型的子元素，这就是报错的核心原因。
• 调用pegaDia时错误传入了字符串"{ passagens.departure_date }"，而非实际的日期变量passagens.departure_date。
• useEffect未设置依赖数组，会导致组件无限重复调用loadPassagens，引发不必要的重复渲染。

解决方案 #

1. 修改pegaDia函数，返回格式化后的字符串 #

把函数返回值从对象改为拼接好的目标格式字符串：

export function pegaDia(str) {
  const monthNames = [
    "Jan", "Fev", "Mar", "Abr", "Mai", "Jun",
    "Jul", "Ago", "Set", "Out", "Nov", "Dez"
  ];

  const d = new Date(str);
  const monthAbbr = monthNames[d.getMonth()];
  const dia = d.getDate(); // 若加1是为了处理时区偏移，请确认场景后调整，避免31号加1变成32号的错误
  return `${dia} ${monthAbbr}`;
}

2. 修正pegaDia的调用参数 #

去掉多余的引号和花括号，直接传入实际日期变量：

<span>Ida {pegaDia(passagem.departure_date)}</span>

3. 修复useEffect的依赖数组 #

添加空数组作为依赖，确保数据仅在组件挂载时加载一次：

useEffect(() => {
  async function loadPassagens() {
    const response = await api.get("ZLIMIT_1?limit=10");
    setPassagens(response.data.slice(0, 10));
  }
  loadPassagens();
}, []);

完整修正后的代码 #

functions.js #

export function pegaDia(str) {
  const monthNames = [
    "Jan", "Fev", "Mar", "Abr", "Mai", "Jun",
    "Jul", "Ago", "Set", "Out", "Nov", "Dez"
  ];

  const d = new Date(str);
  const monthAbbr = monthNames[d.getMonth()];
  const dia = d.getDate();
  return `${dia} ${monthAbbr}`;
}

Board.jsx #

import Head from "next/head";
import styles from "./styles.module.scss";
import api from "../../services/api";
import { useEffect, useState } from "react";
import { pegaDia } from "./functions";

export default function Board() {
  const [passagens, setPassagens] = useState([]);

  useEffect(() => {
    async function loadPassagens() {
      const response = await api.get("ZLIMIT_1?limit=10");
      setPassagens(response.data.slice(0, 10));
    }
    loadPassagens();
  }, []);

  return (
    <>
      <Head>
        <title>Passagens Promocionais</title>
      </Head>

      <div className={styles.container}>
        <div className={styles.listapassagens}>
          {passagens.map((passagem) => {
            return (
              <article key={passagem.created}>
                <strong>{passagem.arrival_ap_city}</strong>
                <br />
                <span>Saindo de: {passagem.departure_ap_city}</span>
                <span>Ida {pegaDia(passagem.departure_date)}</span>
                <span>Volta {pegaDia(passagem.returning_date)}</span>
                <span>Preço {passagem.price_w_fees}</span>
              </article>
            );
          })}
        </div>
      </div>
    </>
  );
}

额外说明 #

• 原代码中getDate()+1如果是为了处理UTC转本地时区的偏移，建议用toLocaleDateString等方式明确处理时区，避免直接加1导致日期越界。
• map循环中将每一项命名为passagem而非和数组同名的passagens，避免变量名混淆。

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