useState:带论点的儿童中的SetState

Question

寻求任何帮助。

如何将setState传递给子组件并使用c参数而不出现类型记录错误？

父母:传承setState

export interface State {
    value1: string;
    value2: string;
}

const Parent = () => {
    const [state, setState] = useState<State>({
        value1: "test",
        value2: "test",
    });

    return (
        <React.Fragment>
            <Child setState={setState} />
        </React.Fragment>
    );
};

export default Parent;

子:使用带c的setState作为参数，c读入带有类型错误的下划线。

type Props = {
    setState: Dispatch<State>;
};

const Child: React.FC<Props> = ({ setState }) => {
    return (
        <React.Fragment>
            <button
                onClick={() => {
                    //c is read underlined: Argument of type '(c: any) => any' is not assignable 
                    //to parameter of type 'State'.
                    //Type '(c: any) => any' is missing the following properties from type 
                    //'State': value1, value2
                    setState((c) => {
                        return {
                            ...c,
                            value2: "HelloWorld",
                        };
                    });
                }}
            />
        </React.Fragment>
    );
};

export default Child;

Answer 1

尝试一下，您可以用状态类型替换<any>。

type Props = {
    setState: React.Dispatch<React.SetStateAction<any>>;
};

Answer 2

首先，由于您使用的是功能组件，所以应该将状态分离为单独的变量，而不是有一个状态对象。而不是{ value1: string; value2: string; }，对useState进行两个单独的调用。这将在稍后简化逻辑。

const Parent = () => {
    const [value1, setValue1] = useState('test');
    const [value2, setValue2] = useState('test');

    return (
        <React.Fragment>
            <Child setValue2={setValue2} />
        </React.Fragment>
    );
};

(请注意，Parent不需要单独的State类型声明，因为它可以自动推断)

关键是正确地在子节点中键入setValue2道具。如果您在父类中的setValue2上悬停，您将看到它的类型是：

React.Dispatch<React.SetStateAction<string>>

因此，这就是您需要Child为其提供的：

const Child = ({ setValue2 }: { setValue2: React.Dispatch<React.SetStateAction<string>> }) => {
    return (
        <React.Fragment>
            <button
                onClick={() => {
                    setValue2('HelloWorld');
                }}
            />
        </React.Fragment>
    );
};

Answer 3

这

type ChildrenProps = {
  setState: (value: State) => void
}

或者更喜欢我：

interface ChildrenProps {
  setState: (value: State) => void
}

最准确，但不可能记住：

import { Dispatch, SetStateAction} from "react"

interface ChildrenProps {
  setState: Dispatch<SetStateAction<string>>
}

如果您悬停在父组件的setState函数上，您将看到类似于这个Dispatch<SetStateAction<string>>的类型，您可以使用它，就像中一样。对我来说，那种类型很难记住。幸运的是，类型记录很聪明，而且还接受一个简化的形式：(value: State) => void