Luxon DateTime SetZone () возвращает «недействительный» после изменения часового пояса в React ⇐ Javascript

[Anonymous]

Я строю планировщик встреч часового пояса, используя React и Luxon. Планировщик отображает таблицу временных слотов в 24-часовом формате, показывая локальное время каждого участника, основанное на выбранном их часовом поясе Iana. < /P>
Каждый участник может: < /p>

Редактировать свое имя < /li>
Выберите часовую зону, используя входные в соответствии с valieme

. Object) < /li>
< /ul>
Проблема: < /h1>
Первоначально, временные интервалы рендеринг правильно. Но когда я выбираю новый часовой пояс из раскрывающегося списка, только обновления этикетки (название нового города/зоны в заголовке таблицы). Но все время в этом столбце становятся «недействительными».

Код: Выделить всё

// src/components/MeetingPlanner.jsx
import { useState } from 'react';
import { DateTime, IANAZone } from 'luxon';
import { zoneAliases } from '../../public/zoneAliases.js';

export default function MeetingPlanner() {
const [participants, setParticipants] = useState([
{ name: 'You', zone: 'Asia/Colombo' },
{ name: 'Teammate', zone: 'America/New_York' },
]);

const [selectedDate, setSelectedDate] = useState(DateTime.now().toISODate());

const addParticipant = () => {
setParticipants([...participants, { name: '', zone: 'UTC' }]);
};

const updateParticipant = (index, key, value) => {
const updated = [...participants];
updated[index][key] = value.trim(); // 🔧 ensure no spaces that break zone
setParticipants(updated);
};

const removeParticipant = (index) => {
const updated = [...participants];
updated.splice(index, 1);
setParticipants(updated);
};

const capitalize = (s) =>
typeof s === 'string' ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : s;

const pad = (n) => n.toString().padStart(2, '0');

const isValidZone = (zone) => IANAZone.isValidZone(zone);

return (


📅 Select Date:
 setSelectedDate(e.target.value)}
className="bg-gray-800 border border-gray-600 text-white p-2 rounded"
/>

{participants.map((p, i) => (

 updateParticipant(i, 'name', e.target.value)}
className="border bg-gray-900 border-gray-700 p-2 rounded w-32 text-white"
/>
 updateParticipant(i, 'zone', e.target.value)}
className="w-56 p-2 rounded bg-gray-900 border border-gray-700 text-white"
/>

{Object.entries(zoneAliases).map(([key, label]) => (
{label} ({key})
))}

 removeParticipant(i)}
className="text-red-400 hover:underline"
>
🗑️


))}

➕ Add Participant






Time (UTC)
{participants.map((p, idx) => {
const city = p.zone?.includes('/') ? p.zone.split('/')[1].replaceAll('_', ' ') : p.zone || 'Unknown';
const label = `${p.name} (${capitalize(city)})`;
return (

{label}

);
})}



{Array.from({ length: 24 }).map((_, i) =>  {
const base = DateTime.fromISO(`${selectedDate}T${pad(i)}:00`, { zone: 'UTC' });
return (


{base.toFormat('HH:mm')}

{participants.map((p, idx) => {
const zone = p.zone.trim();
const local = isValidZone(zone) ? base.setZone(zone) : DateTime.invalid("Invalid Zone");
const display = local.isValid ? local.toFormat('hh:mm a') : 'Invalid';
return (

{display}

);
})}

);
})}




);
}

вот Zonealiases.js
Пожалуйста, помогите мне исправить мой код.

Подробнее здесь: https://stackoverflow.com/questions/796 ... e-in-react