其实我有两个问题.首先,当我试图解决Lesson时,我得到了

"Type 'Lesson | Lesson[]' is not assignable to type 'Lesson'.
  Type 'Lesson[]' is missing the following properties from type 'Lesson': name, note, hour, startDate, and 2 more."

父组件中的错误 这是我的父母公司.

import React, { useState, useEffect } from 'react'
import { Lesson } from './LessonType'
import NewLessonModal from './NewLesson';
function LessonList() {
    const [lessons, setLessons] = useState<Lesson[]>([]);
    const url = "https://localhost:7065/api/Lessons"
    const addLesson = (lesson: Lesson[]) => {
        setLessons([...lessons, lesson])
        console.log(lesson)
    }
}
    return (
        <div>
            <NewLessonModal addLesson={addLesson} />
        </div>
    )

}

这是我的子元素公司.

import { ChangeEvent, useState } from "react";
import { Lesson } from './LessonType'
type Props = {
    addLesson(lessonData: Lesson[]): void
}
function NewLessonModal({ addLesson }: Props) {
    const [name, setname] = useState<string>("")
    const [notes, setnotes] = useState<string>("")
    const [startDate, setstartDate] = useState<string>("")
    const [endDate, setendDate] = useState<string>("")
    const [hour, sethour] = useState<number>(0)
    const [certificate, setcertificate] = useState<string>("")
    const [imagePath, setimagePath] = useState<string>("")
    const [lessonData, setLessonData] = useState<Lesson[]>([])

    const changeValue = (event: ChangeEvent<HTMLInputElement>) => {
        if (event.target.name === "name") {
            setname(event.target.value)
        }
        if (event.target.name === "notes") {
            setnotes(event.target.value)
        }
        if (event.target.name === "startDate") {
            setstartDate(event.target.value)
        }
        if (event.target.name === "endDate") {
            setendDate(event.target.value)
        }
        if (event.target.name === "hour") {
            sethour(Number(event.target.value))
        }

    }
    const addNewLesson = () => {
        setLessonData([
            ...lessonData,
            { name: name, note: notes, startDate: startDate, endDate: endDate, hour: hour, certificate: certificate, imagePath: imagePath }
        ]);
        addLesson(lessonData)
    }
return ....

课程类型文件为

export interface Lesson{
   name:string,
   note:string,
   imagePath?:string,
   hour:number,
   startDate:string,
   endDate:string,
   certificate:string,
   id?:number,
   createdDate?:string 
}

我无法修复此类型错误,我try 将数据传递给父组件.对象的第一个数组没有数据.第二遍数据处理我在父组件中获得第一个数据

推荐答案

在你的NewLessonModal人中,没有必要有额外的lesson个状态.您可以使用所有其他状态返回1个新的课程对象.我们可以更新Props,使其在回调中具有单个课程,而不是array.

type Props = {
  addLesson(lesson: Lesson): void;
};

function NewLessonModal({ addLesson }: Props) {
  const [name, setname] = useState<string>("");
  const [notes, setnotes] = useState<string>("");
  const [startDate, setstartDate] = useState<string>("");
  const [endDate, setendDate] = useState<string>("");
  const [hour, sethour] = useState<number>(0);
  const [certificate, setcertificate] = useState<string>("");
  const [imagePath, setimagePath] = useState<string>("");

  const changeValue = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.name === "name") {
      setname(event.target.value);
    }
    if (event.target.name === "notes") {
      setnotes(event.target.value);
    }
    if (event.target.name === "startDate") {
      setstartDate(event.target.value);
    }
    if (event.target.name === "endDate") {
      setendDate(event.target.value);
    }
    if (event.target.name === "hour") {
      sethour(Number(event.target.value));
    }
  };

  const addNewLesson = () => {
    // add a new object with all the properties
    addLesson({
      name: name,
      note: notes,
      startDate: startDate,
      endDate: endDate,
      hour: hour,
      certificate: certificate,
      imagePath: imagePath,
    });
  };

  return ();
}

现在,在LessonList中,我们需要通过更新回调类型来反映这些更改.

function LessonList() {
  const [lessons, setLessons] = useState<Lesson[]>([]);
  const url = "https://localhost:7065/api/Lessons";

  const addLesson = (lesson: Lesson) => {
    console.log(lesson);
    setLessons([...lessons, lesson]);
    // or
    // setLessons((prevLessons) => {
    //   return [...prevLessons, lesson];
    // });
  };

  return (
    <div>
      <NewLessonModal addLesson={addLesson} />
    </div>
  );
}

同样值得一提的是,当执行此操作时,addLesson函数将不会从上面的行接收更新的lessonData,因为react 状态更新是kinda async

setLessonData([
  ...lessonData,
  {
    name: name,
    note: notes,
    startDate: startDate,
    endDate: endDate,
    hour: hour,
    certificate: certificate,
    imagePath: imagePath,
  },
]);
addLesson(lessonData);

Typescript相关问答推荐

在TypScript手册中可以视为接口类型是什么意思?

类型是工作.但它失go 了正确变体的亮点..为什么?或者如何增强?

接口的额外属性作为同一接口的方法的参数类型'

为什么tsx不判断名称中有"—"的属性?'

使用泛型keyof索引类型以在if-condition内类型推断

类型脚本中没有接口的中间静态类

如何判断对象是否有重叠的叶子并产生有用的错误消息

<;T扩展布尔值>;

用于验证字符串变量的接口成员

如何以Angular 导入其他组件S配置文件

将带有样式的Reaction组件导入到Pages文件夹时不起作用

在组件卸载时try 使用useEffect清除状态时发生冲突.react +打字

如何避免从引用<;字符串&>到引用<;字符串|未定义&>;的不安全赋值?

TypeScrip-如何自动推断UNION变量的类型

如何通过转换器类继承使用多态将对象从一种类型转换为另一种类型

如何使函数参数数组不相交?

如何在Next.js和Tailwind.css中更改悬停时的字体 colored颜色

如何从联合类型推断函数参数?

如何通过nx找到所有受影响的项目?

为什么我的 Typescript 函数中缺少 void 隐式返回类型?