如何更新嵌套的 state 或 Typescript 和 Reactjs 中的值？

Question

如果我嘗試更新 object 的嵌套值，則會出現 Typescript 錯誤。 這是我的代碼。

type InterviewType = {
    time: string;
    person_name: string;
}
type FormState = {
    description: string | undefined;
    interviews: InteviewType[] | undefined;
};

const [formState, setFormState] = useState<FormState>({
    description: '',
    interviews: [],
});

useEffect(() => {
    setFormState({
      ...formState,
      description: interviewData?.data.description,
      interviews: interviewData?.data.interviews,
    });
}, [interviewData]);

interviewData可能是這樣的

{
    data: {
        description: 'Some Description',
        interviews: [
            {
                time: '10:00 AM',
                person_name: 'xyz'
            },
            {
                time: '10:10 AM',
                person_name: 'xyz2'
            },
        ]
    }
}

當我嘗試通過以下代碼使用新值動態更新時間時，它給了我一個錯誤

setFormState({
    ...formState,
    interviews: {
      ...formState.interviews,
      [index]: {
        ...formState.interviews[index],
        'time': val,
      },
    },
});

屬性“長度”的類型不兼容。 輸入'號碼 | undefined' 不可分配給類型 'number'。 類型“未定義”不可分配給類型“數字”。 TS2322

現在，我可以通過提供 ignore ts 注釋來忽略此錯誤，並且代碼工作正常。 但我的審稿人不接受，並希望我刪除忽略評論。 這個問題有什么解決方案或不同的方法嗎？

setFormState({
    ...formState,
    interviews: {
        // @ts-ignore: Object is possibly 'null'.
      ...formState.interviews,
      [index]: {
        // @ts-ignore: Object is possibly 'null'.
        ...formState.interviews[index],
        'time': val,
      },
    },
});

不知何故，如果我能夠通過實現不同的邏輯來避免這個錯誤，那么一個新的會說Object is possibly 'null' or 'undefined'. TS2533 Object is possibly 'null' or 'undefined'. TS2533 。 順便說一句， interviewData數據來自 API。 因此很明顯fromState.interviews最初是undefined or null 。 那么，我怎樣才能避免這個錯誤呢？

Answer 1

回答如何在索引處更新數組。

假設您想在index處更新面試時間

代碼的作用是，它遍歷 interviews 數組，如果索引匹配我們要更新的索引，我們返回一個新的更新的 object {...interview, time: newTime }，否則我們保持相同的 object。

const updateInterview = (atIndex, newTime) => {
  setFormState({
    ...formState,
    interviews: formState.interviews.map((interview, i) => {
      if (atIndex === i) return { ...interview, time: newTime };
      return interview;
    })
  });
}