TypeScript реагирует, как установить состояние массива

Question

В настоящее время я столкнулся с проблемой, когда я получаю данные из своего API, а затем я хотел бы манипулировать данными для создания массива, называемого событиями, который я могу использовать для передачи в свой календарь. Я пробую следующее:

const createEvents = () => {
        workouts.map((w)=> {
            setEvents(...events, 
            {           
                id: w.id,
                title: w.name,
                date: w.dateOfWorkout
            });

        });

Однако я получаю сообщение об ошибке, в котором говорится, что он ожидал только 1 аргумент, но вместо этого получил 2. Во время поиска в Google я наткнулся на этот веб-сайт (https://daveceddia.com/usestate-hook-examples/), на котором был пример, очень похожий на приведенный выше. Я определяю свои события следующим образом:

const [events, setEvents] = useState([]);

Что мне здесь не хватает? Я новичок в реакции и TS / JS. Я приехал из C#, где, по сути, я пытаюсь сделать эквивалент:

myData.Select(x => new {
Id = x.Id,
...
})

Answer 1

Вы можете попробовать поместить свои аргументы в массив?

setEvents([
//--------^
  ...events, 
  {           
    id: w.id,
    title: w.name,
    date: w.dateOfWorkout
  }
]);

Кстати, даже если он работает, я не буду вызывать setEvents внутри карты (или внутри любого другого l oop), это не должно использоваться таким образом.

Я бы, вероятно, сделал что-то вроде этого:

const createEvents = () => {
  setEvents([...events,
    workouts.map((w) => ({
      id: w.id,
      title: w.name,
      date: w.dateOfWorkout
    }))
  ]);
};

Answer 2

попробуйте следующее:

const newEvents = 
        workouts.map((w)=> ({
                ...events,
                id: w.id,
                title: w.name,
                date: w.dateOfWorkout
            })
        )

тогда вы можете позвонить:

setEvents(newEvents)

В вашем примере вы ничего не возвращаете на карте. Карта - это функция более высокого порядка, она просто принимает функцию в качестве параметра и возвращает преобразованный массив объектов.

Answer 3

Не столько как ответ, а скорее спасибо тем, кто откликнулся. Используя ваши ответы, а также прочитав еще немного о react / mobx. Я понял, что для достижения моей цели мне нужно было создать вычисляемое свойство в моем WorkoutStore.ts следующим образом:

@ computed get events () {const data = this.workouts.map ( (w) => ({id: w.id, title: w.name, date: w.dateOfWorkout}))

    return data;
};

, а затем я могу сделать следующее в моем файле Workout.tsx:

const {getWorkouts, events} = root.workoutStore;

    useEffect(() => {
        console.log("In here");
        if(match.params.id) {
            getWorkouts(match.params.id);
        }
    }, [match.params.id, getWorkouts])

После того, как он смонтирован, я теперь легко могу просто сделать events={events} внутри моего полного компонента календаря. Причина переноса его в магазин заключается в том, что в противном случае (я предполагаю, что из-за порядка операций и т.п.) объект тренировки всегда был пуст и, следовательно, на его основе не вычислялись события.

Еще раз спасибо Максу и чудо за то, что направили меня в правильном направлении