小编Jac*_*cob的帖子

我有一个可以处于两种不同状态的组件：编辑模式和查看模式。为了适应这一点，我有一个联合类型来完成这项工作，但我仍然在组件的参数中收到 TypeScript 的抱怨：

type View = {
    isEditing: false;
    viewHandler: () => void;
    someOtherProp: any // this is unique to view mode
};

type Edit = {
    isEditing: true;
    editHandler: (id: string) => void;
};

export type MyProps = View | Edit;

然后它在这里抱怨：

const Item: React.FC<MyProps> = ({
    isEditing = false,
    editHandler,
    ~~~~~~~~~~~
}) => {

Property 'editHandler' does not exist on type 'PropsWithChildren<MyProps>'.

我缺少什么？

我正在构建一个小项目来更熟悉 Hooks，但我现在遇到了一个问题：

该项目是一个天气应用程序，从 API 中提取城市的天气数据。下面的代码是该应用程序的简化版本。\

import React, { useState, useEffect } from "react"
import axios from "axios"

const App: React.FC = () => {
    const [weather, setWeather] = useState<any>({})
    const [city, setCity] = useState<string>("London")
    const [cities, setCities] = useState<string[]>([
        "London",
        "New York",
        "Dubai",
        "Berlin",
        "Los Angeles",
        "Sydney",
    ])

    useEffect(() => {
        axios.get(`https://api-url/?query=${city}`)
            .then(res => setWeather(res.data))
            .catch ...
    }, [])

    return (
        <Drawer>
            <nav>
                <ul>
                    {cities.map((c, i) => (
                        <li key={i} onClick={() => setCity(c)}>
                            {c}
                        </li>
                    ))}
                </ul>
            </nav>
        </Drawer>
        // …