UseState 和 useContext 在 React Typescript 中不能一起工作答案

【问题标题】：UseState and useContext does not work together in React TypescriptUseState 和 useContext 在 React Typescript 中不能一起工作
【发布时间】：2020-02-19 09:38:24
【问题描述】：

我尝试使用带有 useState 钩子的 context api。我无法与打字稿连接在一起:(

首先创建 App.tsx：

const App = () => {

    const [exampleId, updateExampleId] = useState(0);

return ( 
 <div>
   <ExampleContext.Provider value={ [exampleId, updateExampleId]}>
        <ExampleList/>
   </ExampleContext.Provider>
</div>
    );
}

export default App;

然后我添加了 ExampleList.tsx：

function ExampleList() {

    const {exampleId, updateExampleId} = useContext(ExampleContext);

 const handleListItemClick = (
        event: React.MouseEvent<HTMLDivElement, MouseEvent>,
        id: number,
    ) => {
        // How can I call updateExample to set id to exampleId?
        updateExampleId();
    };

    return (
        <List component="nav">
            {examples.map((example) =>
                <ListItem button
                          key={example.id}
                          selected={...}
                          onClick={event => handleListItemClick(event, example.id)}>
                    <ListItemText
                       Example Text
                    />
                </ListItem>
            )
            }
        </List>

    );

还有上下文。如何创建类型化上下文？有必要吗？我试着这样使用它：

export interface ContextType {
    exampleId: number,
    updateExampleId: (value: number) => {}
}

// React.createContext< ContextType > ???
export const ExampleContext = React.createContext({
    exampleId: 0,
    updateExampleId: () => {}
});


export default ExampleContext ;

【问题讨论】：

幸运的是我能解决它。给 context 和 useState 添加类型和默认值后，效果很好。
你能展示一下你使用的类型吗？

标签： reactjs typescript react-context

【解决方案1】：

也许<ExampleContext.Provider value={ {exampleId, updateExampleId} }>

【讨论】：

你写的也许是<... 但你测试过吗？ OP 在comments 中写道 幸运的是我可以解决它。在将类型和默认值添加到 context 和 useState 之后，它运行良好，所以看起来他们以不同的方式解决了这个问题。