typescript 如何通过接口将JSON值传递给组件？

pod7payv 于 2023-02-25 发布在 TypeScript

关注(0)|答案(1)|浏览(178)

我刚开始学习typescript react，但不知道如何正确地将JSON变量从API调用传递到带有接口的组件。

export default function App() {
  const [calendarData, setCalendarData] = useState<ICalendarProps>();
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const url = Constants.API_URL_GET_AVAILABLE;
    const data = {
      date: encodeURIComponent('2023-03-01'),
      period: encodeURIComponent(30),
      duration: encodeURIComponent(30),
    }

    await fetch(url + `?Date=${data.date}&Period=${data.period}&Duration=${data.duration}`, {
      method: 'GET'
    })
      .then(response => response.json())
      .then(postsFromServer => {
        console.log(postsFromServer);
        setCalendarData(postsFromServer);
      })
      .catch((error) => {
        console.log(error);
      })
  }
  return (
    <div>
      <CalendarView data={calendarData} /> {/* <--- here i get error  */}
    </div>
  );
}

我收到了这样的错误

TS2322: Type 'ICalendarProps | undefined' is not assignable to type '{ Date: string; Availables: number; Terms: ITerm; }'.
  Type 'undefined' is not assignable to type '{ Date: string; Availables: number; Terms: ITerm; }'.

我试图传递变量的组件如下所示

export default function CalendarView(props: ICalendarProps) {
    const [data, setData] = useState(props.data);
    return <div></div>;
}

和自定义界面

export interface ICalendarProps {
  data: {
    Date: string;
    Availables: number;
    Terms: ITerm;
  }
}
export interface ITerm {
  Time: string;
  Duration: number;
  IsOccupied: number;
  IsVisible: number;
}

我试图初始化变量，我试图传递。也试图返回后，获取数据，但不知道如何。一定有什么我错过了。这是正确的方式写React？

typescript

来源：https://stackoverflow.com/questions/75532141/how-to-pass-json-value-to-component-with-interface

1条答案

按热度按时间

wvyml7n51#

问题
出错的根本原因是CalendarView组件的 prop 类型为ICalendarProps，是一个必需的 prop 。
最重要的是，状态变量和prop * 的类型不匹配 *。（下一节将解释）
但是，如果您在App组件中看到，我们有

<CalendarView data={calendarData} />

其引用calendarData以传递到 prop 中的data字段。
此calendarData是从useState返回值反结构化的变量，如下所示

const [calendarData, setCalendarData] = useState<ICalendarProps>();

正如您所看到的，初始状态是undefined，因此，您会得到错误，因为可能的undefined变量被传递到data prop，该prop应该是某个定义的类型。

修复

我认为状态变量的类型需要更新，让我使用下面定义的接口来解决它。

interface IData {
    Date: string;
    Availables: number;
    Terms: ITerm;
}

const [calendarData, setCalendarData] = useState<IData>();

1.最基本的修复之一是将ICalendarProps更新为

interface ICalendarProps {
  data?: IData;
}

这将data标记为可选，并且将正常工作。
1.另一种方法是提供以下类型的默认变量

const defaultData: IData = {
    Date: '',
    Availables: 0,
    Terms: {
          Time: '',
          Duration: 0,
          IsOccupied: 0,
          IsVisible: 0
    }
}
...
<CalendarView data={calendarData || defaultData} />
...

1.您还可以尝试为状态指定一个初始值，以使用上面定义的defaultData解决此问题

const [calendarData, setCalendarData] = useState<IData>(defaultData);

赞(0）回复(0）举报 2023-02-25

我来回答

typescript 如何通过接口将JSON值传递给组件？

1条答案

修复

相关问题

热门标签

最新问答